4 category in MOBILE for row instead of 3

[ellisbosisio]

Hi my site is https://www.vaigustando.it/collections/vini

I need to show ON MOBILE all the 4 items on a single row but the theme (Empire) support max 3.

How to fix it? Thank you in advace for supporting me. here a picture to better explain.

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
@media only screen and (max-width: 860px) {
#shopify-section-template--23462052004183__dynamic_collection_list_zRXnYk .collection-list__content {
    grid-template-columns: repeat(4, minmax(auto, 1fr)) !important;
}
#shopify-section-template--23462052004183__dynamic_collection_list_zRXnYk .collection-list__container {
    max-width: 90% !important;
}
}

</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[ellisbosisio]

It works perfectly! thank you so much

[topnewyork]

Hi @ellisbosisio ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
@media only screen and (max-width: 860px) {
#shopify-section-template--23462052004183__dynamic_collection_list_zRXnYk .collection-list__content {
    grid-template-columns: repeat(4, minmax(auto, 1fr)) !important;
}
#shopify-section-template--23462052004183__dynamic_collection_list_zRXnYk .collection-list__container {
    max-width: 90% !important;
}
}

</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!