Trade theme column mobile

Technical Q&A
1

Hello

I was wondering, the preset “Trade” theme in shopify limits the user to only 2 columns in mobile but is there code I can use and steps to apply it to add 4?

This can be seen on my website aromabarn.com under the featured header on the home page

Thanks!

2

Hi @aromabarn

It does not have an option, but you can enable the option “Enable swipe on mobile” instead because if you change it to show 4 columns on mobile, it does not have enough screen width to display the product card normally.

3

How can I change it to show four columns anyway despite it looking different. I’ve seen it in other places and generally believe there is too much swiping on my website

4

Hello @aromabarn ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code at the bottom:

@media screen and (max-width: 749px) {
#collection-template--17955211083955__featured_collection1 .grid--2-col-tablet-down .grid__item {
    width: calc(24% - var(--grid-mobile-horizontal-spacing) / 2) !important;
}
}

Regards
Guleria

5

Hi @aromabarn

To address the issue, please go to Theme → Customize → Theme settings → Custom CSS and insert the following code:

@media screen and (max-width: 749px) {
.slider–tablet.grid–peek.grid–2-col-tablet-down .grid__item, .grid–peek .grid__item {
width: calc(25% - var(–grid-mobile-horizontal-spacing) - 3rem) !important;
min-width: unset !important;
}
}

This is the expected result:

LizHoang_0-1734506104306.png
LizHoang_0-1734506104306.png429×918 143 KB

I hope my solution is helpful to you. Please feel free to provide your feedback.

Liz