This topic has 4 replies, 3 voices, and was last updated 9 years ago ago by rhymeandreason
Hello,
I would like to display 2 products per row in the shop when viewing via mobile devices (rather than just one product per row). In an attempt to achieve this, I’ve added the following code to my custom css file:
@media only screen and (max-width: 480px) { .products-grid .product {width: 50% !important; } }
When the shop page is loading, it displays 2 products per row, as required. However, once the page finishes loading, the layout switches to display just one product per row (although each product still only occupies 50% of the row).
Any idea what might be causing this issue?
I would also very much like this feature. I think it’s important since mobile device displays are getting larger. It makes more sense to allow users to see more products at once if they can see the images well enough.
Hello,
As I see 2 products per row are shown on mobile device.
https://s3.amazonaws.com/fvd-data/notes/168674/1425844073-hHAHAh/screen.jpeg
Please check it once more.
Thank you.
Regards,
Eva Kemp.
Hi Eva,
If using a desktop browser adjusted to mobile width, it works fine. However, it appears the issue only occurs in Safari on an actual mobile device (it works fine in Chrome on mobile). Any ideas?
You must be logged in to reply to this topic.Log in/Sign up