[Resolved] New CLS Woo Product Page

[Stephen]

Previously I’ve eliminated CLS on woo product pages with CSS from David:

.woocommerce div.product .woocommerce-product-gallery {
min-height: 454px;
}

Sadly not working anymore, as the product images load the text below is too low and shifts upwards on all screen sizes.

So I think I need to set a min or max height on the product gallery or a part of the gallery but I’m not having much luck !

Any advice would be much appreciated.

Thanks
Stephen

I’ve tried min and max heights for:

.woocommerce div.product .woocommerce-product-gallery

.woocommerce div.product div.images .flex-control-thumbs

[Fernando]

Hi Stephen,

I can’t seem to replicate the CLS upon testing on mobile and desktop.

See:
https://share.getcloudapp.com/Jrup1Av4
https://share.getcloudapp.com/d5ugwlY4

How are you testing it?

[Stephen]

Hi Fernando, thanks for looking into this.

– This is from Google PageSpeed Insights.

– The mobile screen size must be long enough to include the text below the image gallery which shifts up after images load. I can also see the shift visually when I load on my mobile phone.

– by setting max-height in px in addional CSS I can fix it for one screen size but then it messes up on other screen sizes.

– Previously David has had good work arounds with additional CSS.

– Strictly speaking I think this problem is from WooCommerce not GeneratePress.

Thanks
Stephen

[David]

Hi there,

so the lazy loading of the thumbnails in the gallery navigation seems to be the issue.

Try this CSS to give those a min-height on load:

.woocommerce div.product div.images .flex-control-thumbs {
    min-height: 90px !important;
}

[Stephen]

thanks,

I’ve been trying with this one and even with silly numbers I’m not seeing any change at all, good or bad.
( I do get changes with .woocommerce div.product .woocommerce-product-gallery )

eg – .woocommerce div.product div.images .flex-control-thumbs {
   min-height: 500px;
}

or

.woocommerce div.product div.images .flex-control-thumbs {
   max-height: 5px;
}

[David]

Try making the CSS !important – i update my CSS above to include it

[Stephen]

Thanks David

I never though to try !important

This is having an effect as if I try 900px it does make a big space.

However its not neutralised the shift.

The shift is upwards so should I be trying a max-height instead of min-height ?

[David]

Try adding a max-height see if it makes a difference. If it does then you know that the .flex-control-thumb element is expanding, which could be the way the images are being served. If it doesn’t then something else is the issue

[Stephen]

great thanks I’ll try this later on.

Looks to me like the overall space for .woocommerce-product-gallery shrinks when loaded but exactly which bit is shrinking I’m not sure.

As the gallery is a different size in px in different screen sizes I may not be able to get one number that works.

Thanks
Stephen

[Stephen]

No changing the size of .flex-control-thumb doesn’t effect my shift its coming from something else.

I can stop the shift by setting min height for .woocommerce-product-gallery eg:

.woocommerce div.product .woocommerce-product-gallery {
min-height: 650px !important;
}

But … The height of .woocommerce-product-gallery changes over the range of screen sizes from approx 250px to 650px high so setting a min height does leave a large space on some pages.

Let me know if you have any further ideas.

Thanks
Stephen

[Stephen]

if there is a way to set min-height to normal height + 10px then that would fix it but I doubt that is an option !

[Stephen]

actually this seems to work:

@media (max-width: 768px) {
.woocommerce div.product .woocommerce-product-gallery {
min-height: 109vw !important; }
}

[David]

Thats one way to do it 🙂
There is not way to do a “normal height” + 10px, when the normal height is unknown.

[Stephen]

For anyone with the same problem, setting an absolute height for mobile screen size works better and entirely eliminates CLS on woocommerce single product page mobile screen size.

@media (max-width: 768px) {
.woocommerce div.product .woocommerce-product-gallery {
height: 110vw !important; }
}

[Debra]

@media (max-width: 768px) {
.woocommerce div.product .woocommerce-product-gallery {
height: 110vw !important; }
}

This works for me, too! Thank you for posting.

[Author]

Posts