Support » Plugin: WooCommerce » Making Image responsive for Mobiles

  • Resolved Jods

    (@jods)


    Hi, our website is ready to go online and we had some customers give it a test run last night it went great, except in Woo Commerce product page after clicking on the initial image which is fine in display, the next image is a bigger singular image that shows the product description and where you can add to cart, we have this set to an image size of 400 x 400 px which is fantastic for desktops, laptops, ipads etc everything with a wider screen, on the mobile phones because of the thinner width screen in the portrait mode only the image is showing elongated the display shows the image 400 wide by 100 or 200 in width and I know its because of the width of the mobiles but I was wondering if there was some way of it displaying a little better just for the mobile portrait, if a CSS code would work?? Has anyone else come across this problem??
    I’m using Vantage theme, woocommerce and the website is http://www.scrapbookingdelights.com.au

    Thank You

    https://wordpress.org/plugins/woocommerce/

Viewing 14 replies - 1 through 14 (of 14 total)
  • Nothing comes up on your website so I don’t know exactly what CSS your images use.

    I have made site live for you
    Thanks

    I still don’t see anything and notice you use wp-rocket. Maybe clear the cache?

    The cache cleared, we have it in demo mode at the moment so no one can purchase anything while it is live, the problem is only with mobile phones, the 2nd large image looks squished, long compared to how it looks on the computer and laptop.

    I don’t know whether you will be able to see the image either with the demo mode on, let me know and I can remove that for 30 min or so, thanks

    Its the image when you go into the shop, then into a category then the listing of all products and add to cart images are there, then when you click on an individual image and it goes into that next page, the single product page because we have it set on 400 x 400 px the mobile makes it go long rather than in proportion.

    Ipads, computers, laptops are all good and it is good in landscape mode on mobiles just not portrait.

    We need the images to be 400 x 400px as we have a lot of ederly customers and they require larger images.

    Thanks for taking a look.

    I see the problem happens when you’re in a single product page viewing one product and if the window is small the aspect ratio of the image will change to fit the screen.

    The problem is with other CSS forcing the images to be 400px high and wide. To fix this you can simply add this CSS code. Using max-height/width instead of height/width seems to fix the problem.

    .woocommerce div.product div.images img {
        max-height: 400px;
        max-width: 400px;
    }

    Or to keep images at 400px you would do this instead.

    .woocommerce img, .woocommerce-page img {
        max-width: none;
    }

    I will try it, should I delete the other first?

    I tried the first code and it made the size of the image go to 400 x 400px and looked a little bit silly on the phone it made the psage go a little bit floaty and move a lot. I would like to keep the look on the laptops, computers and ipads at 400 x 400px but make the mobile phone a little more in proportion if that makes sense, even if it means making the portrait size on the mobile a little smaller

    I will try the second code now

    The second code does the same thing, both look the same. When you have the long image, the image that is out of proportion there and you click on that another lightbox comes up, it is that size and proportion image i would like in there just for portrait mobiles displays, if possible some how.

    I tried this but it didn’t work either

    @media only screen and (max-width : 320px) {
    .woocommerce div.product div.images img {
    box-shadow: none;
    display: block;
    height: 300px;
    width: 300px;
    }
    }

    Hi
    the way to go wil lbe to have
    @media (max-width: 480px) {

    .woocommerce div.product div.images img {
       max-width: 100%;
      }
    }

    Thanks Cinghaman,
    We just found that fix and it worked a treat we have used this code:
    .woocommerce div.product div.images img {
    box-shadow: none;
    display: block;
    max-width:90%
    }

    and it works well enough for us on all devices.

    Thanks for your help

    Glad it worked out for you.
    Cheers
    Robin

    Thank You both

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Making Image responsive for Mobiles’ is closed to new replies.