Full width sections only loading correctly after scroll

Building with Gutenberg Blocks/blank theme… Any pointers why the rendering is wrong, would be greatly appreciated thanks!

When I checked your page, the width jumped from 80% to 100% on its own as the page loaded. I did not need to scroll to cause it to happen. Either way, it’s a little disconcerting for layouts to shift like that. This layout shift is exactly what’s going on, a “cumulative layout shift” is what it’s actually called. There’s something in the loading process that’s forcing the browser to re-evaluate the necessary layout. This is usually due to images with unspecified dimensions or late inserted elements like banner ads or iframes.

Unfortunately, I cannot identify exactly what’s causing this on your page. I suggest searching the ‘net for “fixing cumulative layout shifts” to find articles with further information on what to do about this.

Hi

Thanks for your response, I cannot figure out the problem. I have removed all manually entered width settings, for example wide or full width settings. When I activate the 2024 theme, the problem doesn’t exist. When I remove all CSS from style.css file, it still persists.

When I check with the inspector, I see this code below, could this be part of the issue?

.wp-container-core-group-is-layout-13.wp-container-core-group-is-layout-13 {

flex-wrap: nowrap;

}

Thanks again for your support

Makoto

I don’t think that would be the reason, but I cannot say with certainty. If you can find the suspect CSS’ source code, you could make it into a comment (demarcate with /* */) to test its effect. If the layout shift still occurs, it was not the cause, remove the comment demarcation to restore normal function. Be aware that CSS is often cached. You may need to flush any caches, both server and client side, to see the effect of any CSS changes.

Your theme’s stylesheet is loaded last, which is usually desirable, but it could be the cause of the layout shift. You could try enqueuing it with a very low $priority arg so that it loads earlier. Doing so could cause certain rules to be ineffective since they no longer load last. If that is happening when loaded early but the layout shift is gone, you could identify which styles need later loading and load them separately (or move affected rules to the Additional CSS section).