Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Niloy

    (@im_niloy)

    Hi,

    You can solved it by using this custom CSS code.
    You may need to change the height based on your website gallery image size

    /*CSS for CLS Start*/
    /*For Desktop*/
    @media screen and (min-width: 922px) {
    	.woocommerce-product-gallery {
    	  min-height: 630px;
              max-height: 630px;
     }
    }
    /*For Mobile*/
    @media screen and (max-width: 921px) {
     .woocommerce-product-gallery > .flex-control-nav li {
    	height: calc(25vw - 1.5em) !important;
     }
    }
    @media screen and (max-width: 500px) {
    	.woocommerce-product-gallery {
    	max-height: calc((25vw - 1.5em) + (100vw - 56px) + 1em);
     }
    }
    @media screen and (min-width: 545px) and (max-width: 921px) {
    	.woocommerce-product-gallery {
    	max-height: calc((25vw - 1.5em) + (100vw - 117px) + 1em);
     }
    }
    /*CSS for CLS End*/
    Thread Starter slservice33

    (@slservice33)

    Theres always a solution with WordPress !

    Can you tell me what the root cause for CLS in product galleries is ?

    Plugin Author Niloy

    (@im_niloy)

    The cause of the issue may vary depending on certain factors. However, upon investigating our plugin, we discovered that it occurs on websites that experience delays in loading plugin JavaScript files. We are currently working on a future update that will include an option to fix the CLS problem in the plugin settings section.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Needs CSS to fix CLS’ is closed to new replies.