Difference from live site to dev site

Hi Margaret,

The inner container width of the parent containerblock on dev site is set to 1200px, while on live site it's set to 1400px.

When I inspect the page, I see 1400 for the container width as well. But on the back end, under "Container width" it says 1200.

Just make sure you didn't mix up these 2 sites.

The screenshots are for the live site or the dev site?

And make sure cheche is cleared, including server cache if you have it enabled.

Those two screenshots are from the live site. The front end says 1400, and the backend says 1200. But, the live site also looks the way that I want it to!

On the dev site, where things look off, the front end says 1200 and the back end says 1200. But it doesn't look the way it did when I created the page. I'm also not sure why the dev and live pages look different.

It looks like your sites are missing some CSS (box-sizing) from the theme.

Can you try disable all the cache/performance plugin to test?

Make sure the activated plugins on the 2 sites are matching.

Yes, I just disabled WP Rocket and cleared all caches.

Can you go to customizer > general, switch from floatto flexbox?

Yes, thank you.

When I switch from float to flexbox on the dev site, it looks the same.
When I switch from float to flexbox on the live site, it makes it look like the dev site (the container shifts to the right).

Right now, I have left the dev site with flexbox and the live site with float.

Update: Just now, the strangest thing happened. On the dev site, when I go into Customize > General, the "Structure" section with options for float/flex has disappeared! It is still there on the live site.

Hi Margaret,

All the new GP install is set to flexboxby default, there's no option to switch to float.

So switching from floatto flexboxis a one way ticket as floatstructure might create a lot of potential problems during the future updates, so we strongly recommend users switching to flexbox.

Can you switch both sites to flexbox for me to check? Thanks!

And another thing I noticed from your screenshot, you are still using Font, it's better to switch to SVG as it reduce the initial request when loading, will help a lot on performance.

Thank you for that info. Both sites are now set to flexbox and SVG, and WP Rocket is deactivated on both sites.

Thanks for your help!

Now the inner container of both sites are matching 1200px :)

I would also recommend:

1. Set the page content container to full width using the layout meta box.
https://docs.generatepress.com/article/layout-metabox-overview/

2. Avoid using alignfulloption, it creates horizontal scroll sometimes.

Hope that's helpful :)

Thanks so much for your help. That page looks great now.

Something funky has happened to another page on both the dev and live sites. All the content underneath the hero has shifted up and to the left.

I set the page content container to full width. When I change the individual containers on the page from full width to wide width or from full width to none, it makes it look worse. So for now I have the individual containers set to full width.

Hi Margaret,

It's because of the Page hero is still using floatstructure with inline floatCSS.
https://www.screencast.com/t/fuJgpuKJnT

I would recommend using Block element - Page hero instead of using Header element to rebuild the page hero.
https://docs.generatepress.com/article/block-element-page-hero/

Ah, thank you! All set.