How To Reduce The Width Of Multicolumn - Phone View - Dawn Theme

[norvil]

Hi all!

I am looking for a solution to reduce the width of columns in Multicolumn section on Mobile view. I would like to have a better preview of the second column without having to slide, so I can have a peak of the next’s columns image.

My site:

https://soul-scape.com/products/blossom-wood-incense-stand

Will be infinitely grateful for any help!

[niraj_patel]

Hello @norvil

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width: 749px){ .slider.slider--mobile { scroll-padding-left: unset !important; } }

[MansoorAb]

Hi,

Go to Themes> Customize> Multicolumn
Select the Multicolumn and go down to Mobile Layout

Select 2 columns
Check the Enable Swipe on Mobile.
It will show 2 cloumns and 3rd on swipe on mobile.

Please let me know if you need any help. Thanks

[norvil]

Thank you!

This solution reduces the width too much.

I would like to see maximum of one and a half of columns.

I am wondering if this is adjustable through custom code.

[norvil]

Thank you!

This solution reduces the width too much.

I would like to see maximum of one and a half of columns.

I am wondering if this is adjustable through custom code.

[MansoorAb]

Hi - Please Go to Themes> Edit Code
Search for base.css
Search following

@media screen and (max-width: 749px)

.slider–tablet.grid–peek.grid–1-col-tablet-down .grid__item, .slider–mobile.grid–peek.grid–1-col-tablet-down .grid__item {
width: calc(100% - var(–grid-mobile-horizontal-spacing) - 3rem);

}

Change it to

@media screen and (max-width: 749px)

.slider–tablet.grid–peek.grid–1-col-tablet-down .grid__item, .slider–mobile.grid–peek.grid–1-col-tablet-down .grid__item {
width: calc(100% - var(–grid-mobile-horizontal-spacing) - 11rem);

}

Just change 3rem to 11rem.

Please let me know if this doesn’t work or if you need help to do this. Thanks

[ZenoPageBuilder]

Hello @norvil

In Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

@media screen and (max-width: 749px) {
    .multicolumn-list__item.grid__item {
        width: calc(100% - 72px) !important;
    }
}

The result

Hope that helps!

[norvil]

Thank you for your response!

I edited the code as you mentioned, and the results showed up on Shopify store editor (screenshot 1), but when I open up the page on my phone’s browser, no changes show up (screenshot 2). Do you know why so?

[ZenoPageBuilder]

You can increase the offset value by changing the code to

@media screen and (max-width: 749px) {
    .multicolumn-list__item.grid__item {
        width: calc(100% - 96px) !important;
    }
}

Adjust the offset value until it looks best to you.

[norvil]

Thanks!

I changed the offset value, and the changes show up on Shopify builder, but there are no changes on my phone’s browser.

Do you know why?

[ZenoPageBuilder]

Hi @norvil

I checked it on my phone and it seems to be working. You see

[niraj_patel]

Hello @norvil

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width: 749px){ .product .product__media-list .product__media-item { width: 71%; } }