CSS Minify blows up product images in WooCommerce

  • Resolved wronski

    (@wronski)


    3 years, 4 months ago

    CURRENTLY

    I have Minify turned on for our site, with the following configurations:
    – Rewrite URL structure = TRUE
    – HTML / XML – Enable = TRUE
    – JS minify – Enable = TRUE
    – CSS minify – Enable = FALSE

    ISSUE

    When I try set CSS Minify – Enable to TRUE, it causes the product images on our WooCommerce Product Pages to increase to full screen size (for main image), and full width for gallery below.

    I have been trying to do a comparison of the page with and without CSS minify, and only difference I could identify is the “style=width..” on 4 tags on each product page.

    For example:

    CSS Minify = FALSE

    <div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4" style="opacity: 1; transition: opacity 0.25s ease-in-out 0s;"><div class="flex-viewport" style="overflow: hidden; position: relative; height: 593.047px;">

    CSS Minify = TRUE

    <div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4" style="opacity: 1; transition: opacity 0.25s ease-in-out 0s;"><div class="flex-viewport" style="overflow: hidden; position: relative; height: 1235.52px;">

    • This topic was modified 3 years, 4 months ago by wronski. Reason: formatting

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Contributor Marko Vasiljevic

    (@vmarko)

    3 years, 3 months ago

    Hello @wronski

    Thank you for your inquiry and I am happy to assist you with this.
    It seems like the CSS file responsible for this does not agree with being minified or possibly was pre-minified.
    In this case, there are a couple of options.
    First, you can exclude a specific CSS file (the file responsible for product images) from being minified and you can do that by adding the path of the file to Performance>Minify>Advanced>”Never minify the following CSS files” e.g.:
    wp-content/plugins/woo-commerce/css/some_css_file.css
    the other thing that you can do is to enable manually minify and add the files manually and in proper order.
    I can see that you are using some other plugin to minify CSS files and W3TC to minify JS.
    This can be fine if you are using different options as you are at the moment and if you are not experiencing any issues.
    Thanks!

Viewing 1 replies (of 1 total)
  • The topic ‘CSS Minify blows up product images in WooCommerce’ is closed to new replies.

Tags