Max-width on "page wrapper" container issue

Design help General
1

I set a max-width to my site’s “page wrapper” container, but when I go over the max width, the content left aligns instead of stays center…why and how do I fix that?

Here is my site Read-Only: Webflow - Michelle Western's Portfolio

2

Hi Michelle, your readonly link doesn’t work.

3

Thanks for letting me know; I updated it and it should work now!

4

I don’t think you want a max width on your Page Wrapper.

If you’re trying to keep your content within a maximum width, but have the page expand with margins at the sides, then that max width would be applied to your Container elements within your Sections.

i.e. the Section ( and its parent the Page Wrapper ) is full width, and the Container centers within it horizontally due to its auto left and right Margin settings.

You’d need to do some cleanup because you currently have a lot of things outside of Containers, and will see inconsistent / unconstrained layouts at larger breakpoints.

5

What is the reason for that? I was thinking it would be the best container to put it on since everything on the site is in it and I wouldn’t need to go into every container to put it on. Then the sections and containers within it could be at full width (which wouldn’t be larger than the max width I set the page wrapper to.

I want the whole site to be responsive, but still not larger than the one max width.

6

Here are a two reasons;

  • Its standard HTML practice, so why confuse anyone else who needs to work on the site later? ( I’m primarily referring to client sites here ).
  • The Section/Container construct is what you’re trying to create. You could try to wrap your Sections in a DIV and force them to behave like Containers within your page wrapper div, but… you’ll likely be fighting their design.

You could probably hack this by wrapping your page layout inside another DIV, and then that new outer one is configured as a section, while page wrapper becomes a container with auto left and right margins.

That’s a rather gnarly “section” - “container” - Section - Container layout though.

Personally, I’d always build it right the first time though.

1 Like