[Support request] Site content less width than overall container width

[Ben]

Hi,

I want my header/navigation and my hero section to have a width of 1400 px and the content container to have a width of 1200px.

I could set the overall container width to 1400px and change the width of the content container seperately – but where?
I can add custom css

#page {
    width:1200px;
}

That works, but feels wrong. What is the best way to do it?

Or should I use a differenct approach? Use margin instead of width for example? But then also, where?

Thanks!

[David]

Hi there,

if you want to use CSS then use max-width: 1200px instead of width as that will overflow on smaller screens.
and its a perfectly valid method, but there are other methods.

Option 1 – use a Layout Element to set the Content -> Container Width to 1200px.
This is similar to your CSS in that it will reduce only the content width:

Option 2 – make the site header bigger with this CSS:

#masthead .inside-header {
    max-width: 1400px;

For the Hero section, you cans set the inner Container max-width to 1400px.

I like Option 2 as you can leave the Customizer to control the main content widths.

And you can always combine it with Option 1 if there are use cases where the content on specific pages need to be less wide.

[Author]

Posts