Cumulative Layout Shifts

Hi, thanks for reaching out.

Is it specifically your home page you’d like us to take a look at?

Hi Andrew,
thank you for quick reply!
Yes, the issue reported is:
<div class=”siteorigin-panels-stretch panel-row-style panel-row-style-for-466-0″ style=”padding: 80px 113px; background-position: 50% 90px; margin-left: -113px; m…” data-stretch-type=”full” data-overlay=”true” data-overlay-color=”#000000″>

I’ll ask Alex to take a look for you and revert back. I’m not sure there is anything we can do about this. Page Builder Full-Width Stretched rows don’t require any theme compatibility because they use JavaScript to break out of the theme’s content container. This means the feature works with 99.99% of themes.

Thank you Andrew.
I’ll try to change Page Builder rows to different setting then Full-Width, maybe that will help.

After changing rows settings to Standard (opposed to Full-Width), CLS is resolved.
Is that means that Full-Width is not CLS compatible, or it’s only in conflict with the current theme ?
Thanks!

Thanks for the update. Glad to hear you’re making progress. We’re discussing how might deal with this in the future. We might offer a filter or a setting that would allow you to bypass the theme’s content container and then re-apply the container as required on a given page. For now, what you could perhaps try is removing the theme’s container width for the page in question and see if that helps:

.home {
	overflow-x: hidden;
}

.home .container {
	width: auto !important;
}

That should negate the need for Full-Width Stretched rows.

Full-width stretched rows use JavaScript to jump out of the theme’s content container constraints. This allows Page Builder to offer full width stretched layouts with any theme but does involve a layout shift.

Thank you Andrew!
I’ll certainly try to use suggested code.

Thanks for the update. If any follow-up questions arise, please, let us know.