poor CLS Score

Hi Phil

Thanks for posting your question.

SiteOrigin Page Builder uses JavaScript for full-width containers that work with any theme. If you’re using Page Builder full-width and full-width stretched rows and have a bit of technical background, you can try moving to CSS full-width containers, as documented here.

Hi!
Thank you for answer. I tried to make it with CSS. It seems to work great on pages where I use Siteorigin page builder. But all the other pages (Blog posts without page builder, archive pages, …) are displayed full-width.

Thanks for the update; I’m glad to hear you’re making progress. Please check the second value that must be provided here. It’s important that the correct selector is added for your theme.

I think I added the correct selector. I am using the famous sydney theme (Pro version). Must be .page-wrap .container . But every page, that is not build with page builder, has no container then.

Hi Phil,

Do you have a public URL to your website that we can take a look at? This will allow us to take a closer look at your setup and confirm your settings.

Kind regards,
Alex

Hi! Yes of course. I can temporarily turn off the coming soon site.
Here is the Link.

• This reply was modified 1 year ago by philwied.

Hi Phil,

Thank you for the link.

But every page, that is not build with page builder, has no container then.

That’s happening due to a full width row being added to the footer. PB outputs the container breaker to allow for it to display as expected but that has a knock on affect of also removing the container for the regular content due that very same code. To account for this, you need to selectively re-add it back. I’ve had a look around your site and I actually can’t seem to find a non-PB powered page. Can you please link me to one?

Kind regards,
Alex

Hi! Thank you for having a look.
For example all archive pages: Link

Hi Phil,

Thanks. As that’s an archive you can target it using CSS by using the .archive body class. Then you would do the inverse of what the Container Breaker code you’re using. Something like this:

.archive .container {
    max-width: 1300px;
}

This CSS is untested and may not work as expected. Some adjustments are likely required.

Kind regards,
Alex

Hi!
Thank you. I know what you mean and I made some tests. This seems to get really complicated and a lot of coding is needed: Some posts are with Pagebuilder and some without, and there seems to be no way to style them separately. Full-width Footer must be styled to, because it is in a container now. Entry Header with breadcrumbs and page title have no container ….

I think I will have to live with a bad CLS and hope, that Google doesn’t rank me back in the search results.

Hi Phil,

You can apply the provided CSS to the content area by checking if the container is in #content.

It’s possible to apply the provided CSS to non-page builder powered pages by using the body:not(.siteorigin-panels) selector.

Here’s the CSS provided in my last reply with these adjustments:

body:not(.siteorigin-panels) #content .container,
.archive #content .container {
    max-width: 1300px;
}

Kind regards,
Alex