-
Posts
-
I have three main product categories at the top of my main shop page. When the page first loads, they are all rendered with a height of 833px and then readjust down to approximately 338px in the particular desktop res I’m using for testing. This is causing a huge CLS penalty. I’ve tried using this CSS snippet but found it still only applies after the initial taller image height is loaded:
li.product-category img {
height: 338px !important;
}Any ideas how I can prevent this?
Hi feltips83,
Can you try to disable the CDN for the images? and see if it helps.
Best regards,
NikkoHi Nikko,
Thanks for your reply.
I’ve tested with the images CDN turned off and exactly the same result.
I’ve attached the code snip showing the non-CDN images with the “height” attribute still statically defined as 833px and the resulting CLS issue was still occurring.
Regards,
Tom.Hi Tom,
I have inspected the height of the image and it has a height of 833 (px), which is the reason for the issue happening.
Please try to change the image size in the product grid, you should be able to change it in Styling (tab) > Image Size.Best regards,
NikkoOkay yes that pointed me in the right direction. Found that I had the incorrect custom ratio set (6:10) which set it to that height although I’m unsure why this is only affecting the category headings and not all of the products themselves.
Hi,
Glad Nikko was able to help and you were able to sort this out. I’m not sure why this occurred, but shall we close this then?Best regards,
Mike
- The topic ‘Product Category Image CLS issue’ is closed to new replies.