How to make collection ( 1 row ) in mobile mode

[m.essam]

Hi guys , hope you well .

Store link : totycare.com
pass : messam123321
Theme : Dawn
I put collection section in my home page , and it appear as 2 rows like this

(( Mobile Mode ))

And , I want it to be just 1 row

If anybody can help me ,
thanks guys

[Maximus3]

Actually 2 products per row on mobile is the preferred setting, but any reputable theme will have the option in the theme editor, under the “Product Grid” or similar sections.

[Dan-From-Ryviu]

@m.essam

messam123321

You can add this code to Custom CSS of that section

@media (max-width: 749px) {
.grid__item {
    max-width: 100% !important;
    width: 100% !important;
}
}

[m.essam]

first of all , thanks for replying
But , this code make thim 1 column and 2 rows

I want them to be only 1 row , all beside each other and the user just swap to see the rest .

thanks

[devcoders]

Hi @m.essam

1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
2. In the Assets folder, open base.css and add your CSS code at the end

 @media (max-width: 749px) {
.collection .grid__item {
    max-width: 100% !important;
    width: 100% !important;
}
}

[namphan]

Hi @m.essam,

Please go to Customize > Sections > Featured collection > Mobile layout.

you can change it here

[Dan-From-Ryviu]

Got it, please enable Carousel option of that section.

[m.essam]

Thanks so much , appericiated

[shreyhweb]

Customize > Sections > Featured collection > Mobile layout.

[Dan-From-Ryviu]

You are very welcome!

[namphan]

Hi @m.essam,

It’s my pleasure