Archived topic

CLS on Mobile Header

5 replies · Started by Michael on February 25, 2021

Viewing posts 1–6 of 6

February 25, 2021 at 3:20 am #1671858

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!

February 25, 2021 at 5:12 am #1671994

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.

February 25, 2021 at 5:18 am #1672001

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

February 25, 2021 at 12:29 pm #1672750

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.

February 25, 2021 at 10:54 pm #1673187

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.

February 26, 2021 at 1:19 am #1673328

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.

This archived topic is closed to new replies.

Start building better websites today.