Products images not align on mobile page, help

  • Here is my website’s link:
    https://www.psfcorporation.com
    Theme: Storefront
    Using Homepage Control

    On the pc and tablet, my website home page seems to be aligning the product images and titles perfectly fine. However, it doesn’t align the pictures when I use a mobile phone.
    What do I need to change in the php or css files to help align?
    Please help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    Looking at your site it seems to be due to the image sizes you have created as the decrease ever so slightly on smartphones for the products which are not bottles.

    What I would suggest you do is use an image editing app like Gimp or Photoshop to create a white square at a resolution of 800px x 800p. Next, add your existing product image on top of that template and centre the image, then save the image at a resolution of 800px x 800px.

    Do that for each image and set the product cropping of the image to be 300px x 300px from within WooCommerce > Settings > Product > Display > Product images > Catalog Images setting.

    Finally, upload the saved image to your product. This should then crop all images perfectly square at 300px x 300px and have every product image the same size which will prevent the alignment behaviour.

    You can read some more about how to create the best possible images for products when using WooCommerce in this documentation.

    https://docs.woocommerce.com/document/fixing-blurry-product-images/

    Thread Starter goofyco123

    (@goofyco123)

    Thank you so much!

    However I have quick question in regards to showing the products on the homepage.
    When I shrink the size of my browser, it can only show 4 or 2 products. It never shows 4 to 3 to 2 to 1.
    Is there a way to change this?

    Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    Hey @goofyco123,

    I’m not too sure what you mean could you maybe provide a screenshot taken from the storefront demo please.

    https://demo.woothemes.com/storefront/

    When I reduce the width of the browser on the demo the products always display at only one product per row

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Products images not align on mobile page, help’ is closed to new replies.