Archived topic

Site content less width than overall container width

1 reply · Started by Ben on March 31, 2023

Viewing posts 1–2 of 2

March 31, 2023 at 2:58 am #2590292

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!

March 31, 2023 at 5:08 am #2590460

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.

This archived topic is closed to new replies.

Start building better websites today.