How can I adjust the width and gap of blocks in mobile view?

Store Design
1

Hi guys,

I’d like to resolve 2 issues in Mobile view

  1. Increase the width of the first block so it can cover the whole screen

  2. Increase the gap of the second row

Please check my url: https://189ee3-2.myshopify.com/

Screenshot.png
Screenshot.png354×604 73.5 KB

2

Hey @collins276 please add the below css to “base.css” file.

@media screen and (max-width:480px){

.multicolumn-list {
    padding: 0 !important;
    column-gap: 20px;
}
.multicolumn-list li:nth-child(2), .multicolumn-list li:nth-child(3) {
    max-width: calc(48% - 2px)!important;
}
.multicolumn-list li:nth-child(2){
 padding-left:15px;
}
.multicolumn-list li:nth-child(3){
 padding-right:15px;
}

}
1 Like