[Resolved] menu item height – changes mobile header height

[Ying]

Hi Stephen,

Have you tried the CSS with new media query?

Does it work?

[Stephen]

Hi Ying, thats the same media query as originally used.

@media(min-width: 769px)

– I’m assuming that means it applies to all screen sizes above 769px which is tablet and desktop ?

Possibly it should be max width to apply to mobile phone screen size which is where I get the woo CLS?

@media(max-width: 769px)

Thanks
Stephen

[David]

Did you replace the CSS with the revision i made here:

https://generatepress.com/forums/topic/menu-item-height-changes-mobile-header-height/#post-2154218

In the CSS i originally provided both the Rules were inside the @media query, the change was moving one of them outside of it.
So the first rule only applies to screensizes that are wide enough for the sidebar to the left. And the second rule is applied to ALL screen sizes

[Stephen]

Hi, sorry about that I didnt notice it was now outside the media query brackets.

I’ve used the new CSS and unfortunately the shift is remaining 0.267 for https://www.slservice.net/product-page/clipper-blade-sharpening/

I cant see anything actually shifting in the screen shots in chrome developer tools but it is recorded in the page score.

Thanks
Stephen

[David]

I think i need some coffee…. i made another update to the CSS here:

https://generatepress.com/forums/topic/menu-item-height-changes-mobile-header-height/#post-2154218

[Stephen]

Hi, dont worry you’re doing a great job.

I think thats improved it 0.03 for some and 0.06 for some other

from 0.26 to 0.17:
https://www.slservice.net/product-page/ceramic-clipper-blade-sharpening/

from 0.26 to 0.23:
https://www.slservice.net/product-page/clipper-blade-sharpening/

It looks like its done something…

[David]

This CSS rule:

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

Increase the min-height to 454px – it may need tweaking – if that don’t work then Woos just being a pain as usual

[Stephen]

Well thats it – 0 CLS on all products !!

I’ve never seen that before with Woocommerce products – Google Search Console can stop marking most of my sites URLs as Failing ones.

Thank you for taking the time to work that out.

I’m thinking that one day woocommerce will properly fix the error and then I should then remove that bit of CSS.

[Stephen]

The mobile CLS is now always zero

– but I just checked woocommerce desktop product pages and I do have CLS on these from 0.14 to 0.45.

This looks like a totally different cause and maybe comes from the add to basket button re sizing as the page loads ?

Thanks
Stephen

[David]

Hmmm… that could be the late loading of the add to cart form.
Try adding this CSS:

.woocommerce-variation-add-to-cart {
    min-height: 76px;
}

[Stephen]

Hi, not making any difference so far.

I’ll look into this more to see if I can work out what exactly is shifting.

Thanks
Stephen

[David]

The Add to Cart form is loading different options – now i see the Apple Pay option on the form, which is loading late. You will need to address that Woocommerce i am afraid

[Stephen]

Hi OK thanks, that does make sense, I’ve noticed woocommerce loads apple pay and google pay buttons on some pages.

Much appreciated
Stephen

[David]

Yeah – it wouldn’t be so bad if they were displayed consistently and the various options had a a consistent height. Then you could treat it with CSS – but in their absence there’s going to be a big gap.

[Stephen]

Hi, well I suppose a little bit of shift is only really a problem when Google are marking you down for it.

There is some sites with advertising that shift about so much they are almost unusable.

But best to try and keep Google happy if possible.

Thanks
Stephen

[Author]

Posts