[Resolved] Mobile Single Product Page Images

Home Forums Support [Resolved] Mobile Single Product Page Images

Home Forums Support Mobile Single Product Page Images

  • This topic has 8 replies, 3 voices, and was last updated 1 year ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1482755
    Anthany

    Hi GeneratePress team, I have a question about the mobile version of my site and its single product page images. I managed to get the single product page images (that were taken in landscape mode) exactly how I want them cropped and displayed on my desktop site using the following CSS I found on one of your forums:

    .woocommerce div.product div.images a img {
    height: 450px;
    object-fit: cover;
    object-position: center;
    }


    @media
    (min-width: 769px) {
    .woocommerce #content div.product div.images,
    .woocommerce div.product div.images,
    .woocommerce-page #content div.product div.images,
    .woocommerce-page div.product div.images {
    width: 66%;
    }

    .woocommerce #content div.product div.summary,
    .woocommerce div.product div.summary,
    .woocommerce-page #content div.product div.summary,
    .woocommerce-page div.product div.summary {
    float: right;
    width: 30%;
    }
    }

    However, on the mobile version of my site, images taken in landscape mode are heavily cropped whilst portrait mode photos look fine (My site will be predominately photos in landscape orientation). Is there a way to have the single product page images on my mobile site be better formatted for landscape photos? (my site URL: http://www.scuffed.ca )

    Thanks, Anthany

    #1483108
    David
    Staff
    Customer Support

    Hi there,

    using a mix of image aspect ratios in Woo is not a good thing. There is no easy way to identify the orientation and treat those images differently.

    The best method is to save your images as a square aspect ratio, which may require adding white space above/below or left/right. This will save you a tonne of headache.

    #1483672
    Anthany

    Hi David thanks for the reply, my only problem is that, if it was only me uploading photos to the site it would not be a problem, but I am building a marketplace where other people will be constantly uploading their own images for their products to the site, so I cannot edit those photos before they are uploaded hence me needing a solution for the website to auto crop uploaded images for me.

    #1483948
    Elvin
    Staff
    Customer Support

    Hi,

    While David’s suggestion is the most ideal solution, perhaps a CSS specifically targeted for mobile viewports.

    That said, can you point us to the specific part of the site this will be implemented?

    A wise man once said:
    "Have you cleared your cache?"

    #1484071
    Anthany

    Yes I have cleared my cache but it did not change anything. I will link an example of a product page where the photos of the slides that are posted were taken on an iPhone in landscape mode (how the majority of photos on my website will be posted):
    The photos display perfectly on my desktop site but are heavily cropped on my mobile site. I understand that obviously because of the shape of the phone it prefers photos in portrait mode but I would like to sacrifice that to favour landscape photos.

    #1484073
    Anthany

    For some reason the link did not show, here it is:
    https://www.scuffed.ca/product/gucci-slides/

    #1484555
    David
    Staff
    Customer Support

    Whats not helping is this CSS in your Simple CSS:

    .woocommerce div.product div.images a img {
        height: 450px;
        object-fit: cover;
        object-position: center;
    }

    Try applying that within a media query for larger devices only ? eg.

    @media(min-width: 769px) {
        .woocommerce div.product div.images a img {
            height: 450px;
            object-fit: cover;
            object-position: center;
        }
    }
    
    #1485541
    Anthany

    David you continue to shock me with your knowledge and support, thank you that worked perfectly.

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