- This topic has 1 reply, 2 voices, and was last updated 2 years, 11 months ago by
.
-
Posts
-
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!
Customer Support
Hi there,
if you want to use CSS then use
max-width: 1200pxinstead ofwidthas 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.
- You must be logged in to reply to this topic.
