How can I fix my mobile theme's grid collection list display issue?

Store Design
1

Hello,

I have two problems with my mobile theme
The first one is that the Grid collection only displays 3 items instead of 4 while on desktop I have a line of 5 items

2022-07-02_142553.jpg
2022-07-02_142553.jpg401×689 35.8 KB

The second is that when I have a text with image on desktop I have no space or margin and on mobile I have a margin that does not look very good

desktop version:

2022-07-02_142625.jpg
2022-07-02_142625.jpg723×327 39.3 KB

And Mobile Version

2022-07-02_142609.jpg
2022-07-02_142609.jpg393×249 18.7 KB

2

@dRiZeN - can you please share this page link? Please check customize settings, whether is it allowing to add more than 3 on desktop

3

@dRiZeN

Welcome to Shopify Community,

Kindly Share your Store URL,

And Let me know what are you looking.

thank you.

4

@SpeedyDev @suyash1

Yes the store URL is https://universdupuzzle-shop.myshopify.com/

PW: eleuff

No I don’t have a solution to add more than 3 on mobile

5

@dRiZeN , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (max-width: 749px){
    [id] .section-block > .collection > *{
        display: block !important;
    }
}

In relation to the banner image unfortunately there is not an easy way around that. All free themes’ banners/slideshows were coded in a way to cut images off.

Kind regards,
Diego

6

@diego_ezfy

Thank you for the solution!! the problem now is that I have a collection of 5 products which makes that on mobile on the last line I find myself with 1 product on 2 it is possible to force it in 4 so that on mobile I do not have this lack?