Mobile product grid on the theme shows only 3 items per row on phones (desktop shows 5), and a text-with-image section has no margin on desktop but an undesired margin on mobile. Images attached illustrate both issues and are central to understanding the layout problems.
After requests for details, the store URL and password were shared. A suggested quick fix adds CSS in theme.scss/theme.css:
Post-fix, a new concern arose: with a 5‑product collection, the last mobile row displays awkwardly (1 item on a row expected to hold 2), and the author asks if the grid can be forced to 4 columns to avoid the visual gap.
No confirmed solution yet for enforcing 4-per-row on mobile or for the text-with-image margin issue. Discussion remains open.
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
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:
And Mobile Version
@dRiZeN - can you please share this page link? Please check customize settings, whether is it allowing to add more than 3 on desktop
Welcome to Shopify Community,
Kindly Share your Store URL,
And Let me know what are you looking.
thank you.
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
@dRiZeN , do this to fix it in 20 seconds:
@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
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?