CLS and Grid Container Issue

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%;
  }
}

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;
    }
}

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

But will it conflict with my current CSS?

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?

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.

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

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.

I made the change. Please check the reflow issue.

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.

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).

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

Has the reflow issue been addressed?

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.

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/