Increase number of columns in mobile collection list (Dawn)

[manbru]

Hey,

I need some help with increasing the amount of columns shown on mobile, you can by default show maximum 2 columns but i want to show 3.

my store: https://r1vex.myshopify.com/

Thanks for helping!

Right now:

How i want it to look:

[BSS-TekLabs]

• Here is the solution for you @manbru
• Please follow these steps:

• Then find the base.css or theme.css file.
• Then add the following code at the end of the file and press ‘Save’ to save it.

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

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[K-Mahesh]

HELLO @WalletAces

You can add code by following these steps

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

2. Open your section-collection-list.css file

3. Paste the below code bottom on section-collection-list.css

@media screen and (max-width: 749px) {
   .collection-list.grid--peek.slider .grid__item:first-of-type {
      margin-left: 0;
   }
   .collection-list.slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item{
      width: calc(33% - var(--grid-mobile-horizontal-spacing));
   }
}

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[manbru]

Thank you this worked!

[ustudiomx]

Hi! I have kinda the same issue, but what if I want to show maybe 4, 5 or 6 items instead of just 3? Thanks in advance!