[Resolved] Flint Skin / WooCommerce / Two images across on Mobile

[David Bennett]

Hi,
How can I get the Category page images to render two across in mobile in portrait mode and two across (and all the way across the page) in landscape mode?

I imported the Flint settings into a dev site and then copied the settings (except for the custom CSS) across to another site and I have everything the way I want it except for one thing.

On mobile, in the site where I imported the settings, the images on the category pages are two across on my phone (iPhone 6) when held it portrait position and also two across (and all the way across the page) in landscape mode.

On the site to which I copied the settings, the images on mobile are only one across in portrait mode, and similarly only one across and occupying only the left of the screen in landscape mode.

How can I get the Category page images to render two across in mobile in portrait mode and two across (and all the way across the page) in landscape mode?

[Tom]

Hi there,

Have you tried setting the product columns option to 2 using the mobile setting?: https://docs.generatepress.com/article/woocommerce-overview/#shop

Let me know 🙂

[David Bennett]

Hi,
Thanks – that was it, I failed to see the little icon for mobile.

One thing, on the dev site the images are two across but a bigger and the distance between the images is smaller, which I prefer.

Also, although on my device (iPhone 6), the images are lined up OK, when I pull in the viewport on Safari or Firefox, I get an arrangement of one bigger and one smaller image side by side. I put a screen shot from Firefox up on Cloudup, here https://cloudup.com/cM1Zb3uhP76

[Tom]

One thing, on the dev site the images are two across but a bigger and the distance between the images is smaller, which I prefer.

Not too sure what you mean by this – can you explain a bit more?

As for the image sizes, are they all sized the same? Do you have sizes set in Customize > WooCommerce?

[David Bennett]

Yes, I have image sizes set.

I think the best thing is to give you the URL of the dev site, which is at two.—–.com. (substitute the domain I put in the original post).

When I compare the sites on mobile, the images on the dev site are bigger and nearer together than they are on the main site. I think all the settings are the same. I looked at the custom CSS that was imported from the Flint site and I can’t see anything that might affect the image size, but maybe I am missing something.

Hope this explains what I mean.

[David]

Hi there,

there isn’t any CSS that effects the images sizes. I am seeing a larger gap on the landscape mobile ( on dev site ). This is due to the shop product image size being smaller then the width of the column. If you increase the shop thumbnail to around 320px then you will see a reduced gap.

[David Bennett]

Many thanks for the help.

[David]

You’re welcome

[Author]

Posts