[Resolved] CLS and Grid Container Issue

[David]

Hamburger Icon – is the 3 bar menu toggle 🙂

Try adding this CSS so it has a min height enabled on small screens – it should stop the major CLS contribution:

@media (max-width: 531px) {
  #mobile-header {
      min-height: 154px;
  }
  .site-logo.mobile-header-logo {
    min-height: 93px;
    width: 100%;
  }
}

[metcomllc@aol.com]

This is my current CSS. Please tell me where to put it.

#mobile-header img { width: 100%; height: auto; }
h1.entry-title {
display: none;
}
@media (max-width: 768px) {
    .page-hero {
        background-image: url(https://www.tryhypnosisnow.com/wp-content/uploads/2020/04/Hypnosis-NYC-for-quit-smoking-weight-loss-anxiety-phobias-confidence.jpeg);
    }
}
@media (min-width: 769px) {
    .main-navigation li.search-item {
        display: none !important;
    }
}
#mobile-header .inside-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.main-navigation .mobile-bar-items {
    order: 4;
}
input.ticket-selector-submit-btn {
background-color: #001de0!important; color: #fffff;
}
@media(max-width: 1024px) {
    .page-hero {
        display: none;
    }
}

[David]

You can add it at the very end of the CSS – just add a new line after the last }

[metcomllc@aol.com]

But will it conflict with my current CSS?

[metcomllc@aol.com]

I added the CSS but was concerned about a conflict with my current CSS?

I cannot tell myself. Has the logo issue/reflow issue been resolved?

[Elvin]

Hi there,

It shouldn’t conflict as the CSS has its own media rule on a specified viewport different from your other CSS.

I’ve ran the site on Google PSI and while there’s still CLS being flagged. It’s really low to be a cause of concern.

For mobile – Cumulative Layout Shift 0.056
For Desktop – Cumulative Layout Shift 0.001

These values are way below 0.1 which is good.

[metcomllc@aol.com]

Has the “reflow” issue been resolved? I ask because it impacts all of my pages.

[David]

I made a change to the CSS here:

https://generatepress.com/forums/topic/cls-and-grid-container-issue/page/2/#post-1732385

Update your CSS to that – this should stop the menu icon and search moving down when the image loads.

[metcomllc@aol.com]

I made the change. Please check the reflow issue.

[David]

Aah just spotted the Image you have at the top of the page – the HTML contains the incorrect width and height attributes. Can you edit the img html – the width should be 382 and the height should be 276.

[metcomllc@aol.com]

So I made the change but I am wondering why I had the wrong image dimensions as I used the dimensions listed in the WP image block settings. For example, are the dimensions on this page correct https://www.tryhypnosisnow.com/stop-smoking-hypnosis-nyc/? I just want to make sure this is not a site wide issue (wrong image dimensions).

[David]

That image is correct. Can’t say why that other image had incorrect attributes.

[metcomllc@aol.com]

Has the reflow issue been addressed?

[David]

You can see on the PSI report that the reflow has been fixed ie the CLS is 0

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.tryhypnosisnow.com%2Fbecome-emotionally-available%2F&tab=desktop

And one final fix – i noticed some of your left-aligned images don’t work too well on smaller devices. Add this CSS to make sure they fill the width of the screen:

@media(max-width: 500px) {
  .wp-block-image .alignleft,
  .wp-block-image .alignleft img {
    float: none;
    width: 100%
  }
}

you can add this at the end of your Customizer > Additional CSS.

Thats everything done then.

[metcomllc@aol.com]

Thanks David.

Any suggestions for these unique pages, one with many videos

https://www.tryhypnosisnow.com/hypnosis-video-testimonials/

https://www.tryhypnosisnow.com/99-ways-hypnosis-can-help/

[Author]

Posts