Html jumps on mobile, causing high CLS (screenshots provided in a secure note)

[Bark201]

I am using Renew. There is a content jump in mobile devices due to the H1 header. I will provide screenshots in secure notes and a url. I am not sure why it does it but it affects the CLS for all mobile posts and pages I believe. (provided 2 screenshots and url in secure notes).

[christian]

Hey @Bark201,

I tested your site in PageSpeed Insights and the CLS is good. I also don’t see any shift in display since it’s just a simple page. What test are you using? And, have you tested deactivating all 3rd party plugins and custom codes? Please confirm.

Thanks.

[Bark201]

Thank you for your reply.

Since wordpress 5.8.2 there are issues, ignore that origin summary. If you view the page in a mobile device and reload the the title of the page (h1) opens inside the the top blue header (the top of the page) and then pushed back below it. This causes the high CLS.

That blue section is part of a mobile menu of a plugin I am using, How do you set the post to load where it is now and not inside the menu? Looks at the screenshots I sent you earlier, part 1 is where it loads first and part 2 is where it is being pushed down. That causes high CLS.

[Bark201]

I fixed it, its now zero. Its a temporary solution. I would still like to know how to open the post beneath the blue section.

[ruenel]

Hello @Bark201,

You have added this custom CSS code to hide the default mobile header:

@media (max-width: 767px){
header.masthead {
    display: none;
}
}

You have mentioned that you used a mobile menu plugin to display the blue section. Since you are using the 3rd party plugin, you may need to contact the creator of the plugin instead. They should be able to help you with your issue.

Thank you for your understanding.