[Resolved] CLS on Mobile Header

[Michael]

Hi,
Are you able to advise how can I fix the CLS issue that PSI is reporting in my mobile header? I think it’s come about due to some CSS changes I made to have the logo on top of the menu toggle & search button.

<div class="site grid-container container hfeed"> – 0.015 CLS Contribution

Thanks!

[David]

Hi there,

that CLS is tiny and way below the threshold – so not really an issue.

But can you first off disable autoptimize so i can take a closer look.

[Michael]

Thanks David – I’ve disabled Autoptimize on another site of mine with the same issue.

[David]

Hmmm… not sure, i can’t see anything that would affect the image size – but looking at your child Theme CSS there is this:

.mobile-menu-control-wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-top:10px;
}

Maybe the padding top is the problem… very odd.

[Michael]

So I think I figured out the issue – I replaced the logo which I had cropped in WP with the uncropped version. This gets rid of the CLS.

I think the HTML was pulling the incorrect height attribute when I had the logo cropped which was causing the CLS.

[David]

Ooh – thats an odd one – cropping should re-adjust the width/height attributes so the aspect ratio would be correct. Maybe the old HTML got cached….
Glad to hear you found the issue though.

[Author]

Posts