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

Home Forums Support Flint Skin / WooCommerce / Two images across on Mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #896571
    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?

    #896659
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #896739
    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

    #897034
    Tom
    Lead Developer
    Lead Developer

    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?

    #897120
    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.

    #897166
    David
    Staff
    Customer Support

    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.

    #902877
    David Bennett

    Many thanks for the help.

    #902927
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.