High CLS issue in mobile devices

To resolve the Cumulative Layout Shift (CLS) issue, you can apply the following CSS code. To do this, please follow these steps:

1. Go to the "Codeixer > Product Gallery” from the main menu.
2. Click on “Advanced Settings.”
3. Find the “Custom CSS” option and paste the provided code.
4. Save your changes to ensure the code is applied.

/*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: 500px) {
	.woocommerce-product-gallery {
	max-height: calc((25vw - 1.5em) + (100vw - 56px) + 1em);
        height: 500px !important;
        display: block;
 }
}
@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*/

This should help mitigate any CLS problems on your site. If you have any questions or need further assistance, feel free to reach out!