Featured Collection on mobile view

English Shopify Shopify Design
1

Hi all,

Hope everyone is well. Glad the platform is back up and running!
I was hoping someone could please assist. We have a ‘featured collection’ on the home page of our website. I edited the code so that it shows 7 x products on desktop view as it looks neater and more condensed.
Unfortunately, this has left the mobile view looking terrible/unable to see product images/unable to read product titles etc.

Could someone please assist in fixing the mobile view for this section?

Theme: Palo Alto
Website Link: https://prestige-coffee.com.au/

Thank you.

  • Mollie
2

Hi @MollieHammond,

Please change code:

#shopify-section-template--22449122640156__section_collection_7nTafE .product-grid-item {
    width: 15%;
    margin: auto;
}

=>

@media only screen and (min-width: 1024px) {
#shopify-section-template--22449122640156__section_collection_7nTafE .product-grid-item {
    width: 15%;
    margin: auto;
}
}
3

Hi,
Sorry, where would this code be?

4

Hi @MollieHammond,

Where did you add the code showing 7 products? Please send me a screenshot of it, I will check and guide you

5

Hey,
Thanks so much for helping! Appreciate it so much. I put it in the front editors custom CSS section.

image
image282×219 7.78 KB

6

Hi @MollieHammond,

Please change all code:

@media only screen and (min-width: 1024px) {
.product-grid-item {
    width: 15%;
    margin: auto;
}
}

If I helped you, then a Like would be truly appreciated.

1 Like
7

THANK YOU SO MUCH!!! That worked perfectly. Really appreciate you taking the time to assist.

8

Hi @MollieHammond,

It’s my pleasure :blush:

1 Like