3.0 Product gallery issues on Mobile

  • Resolved Andrew

    (@cipes)


    7 years, 11 months ago

    Hi Mike & WooCrew,
    I just updated to the 3.0 recently and my galleries broke (didn’t read the release notes!) and I’ve just added the theme support for the new product gallery functionality. It looks and works great!

    My issue is that on mobile screens I’m still getting the product images overflowing outside the viewport (they don’t size to the screen). There’s also a lot of inline CSS styles that seem to be injected in the gallery markup and I can’t modify the elements as I usually can with CSS. Here’s a product link for reference.

    I can’t find any demo’s of the 3.0 product gallery so I can’t determine what the normal behaviour should be. I also don’t have another WooCommerce compatible theme to test with. Does this seem like there’s some theme styles that are affecting things, or are there options I modify for the new gallery styles.

    Thanks!

Viewing 1 replies (of 1 total)
  • Thread Starter Andrew

    (@cipes)

    Hi Crew,
    I figured out how to force mobile friendly image sizes via CSS. it took a bit of testing to figure out. Below is the media query I had to add to my style.css to have product images fit within the screen size. 

    /* Small Screens */
@media screen and (max-width: 460px) {
  .woocommerce-product-gallery__image {
    min-height: 300px;
  }
  div.product div.images img, #content div.product div.images img {
    width: auto;
  }
}
Viewing 1 replies (of 1 total)
  • The topic ‘3.0 Product gallery issues on Mobile’ is closed to new replies.

Tags