cls issue on mobile product page

Hi Robert,

Yes, you can assign image dimensions to your product images so that the space for the image is dedicated when the page loads. This can help reduce CLS (Cumulative Layout Shift) issues on your mobile product pages.

Follow the steps below to achieve this:
1. Go to the WordPress Dashboard and navigate to Appearance > Customize.
2. In the left sidebar, click on Additional CSS.
3. Add the following CSS Code:

.woocommerce div.product div.images img {
width: 100%;
height: auto;
max-width: 500px;
max-height: 500px;
}

4. Click Publish

In this code, we are selecting the product image element and setting its width to 100% of its container, while also specifying a maximum width and height of 500 pixels. This will ensure that the image is always scaled proportionally and fits within its container, while also reserving the correct amount of space on the page.

You can adjust the maximum width and height values to suit your specific needs. Once you have published this update, you should see an improvement in CLS on your mobile product pages.

Please let me know if this works.

Cheers,
Eze

Thank you for the information.
I resolved removing all the images from the lazy load.

I will save your code in case a will have any problem in the future.

Thank you very much!

Roberto

I tried your code and it works!
Now i’m happily using it ??

Thank you!

Glad to hear the code is working, Roberto! Let us know if there’s anything else we can help you with.

Kindly,

Hannah