Archived topic
Container Width
4 replies · Started by Paul on October 10, 2018
Hi there... I'm trying to make my container 100% width of the browser. I'm using the side navigation but I want main elements to be 100% wide and then other elements to have boxed width like 1200px for example. Here is an example of what I am looking for.
http://okddev.okdpreview.net/OKD-Home.jpg
I want the eagle picture and purple box for example to be 100% but then have other elements like the text inside the purple box to have a fixed width like 1200px.
Here is an Avada demo similar to what I'm looking for:
https://avada.theme-fusion.com/dentist/
Is this possible?
Thanks, Paul
In order to do that, you would need to add some HTML to your pages.
For example, if the content width is 100% by default, you could wrap the areas you want to be more narrow in a class:
<div class="narrow-content">
Narrow content in here.
</div>Then you'd add some CSS:
.narrow-content {
max-width: 750px;
margin-left: auto;
margin-right: auto;
}Let me know if this helps or not :)
Ok, I have done this but how do I make the main container 100% so the purple box touches the left header navigation container and the right side browser?
Thanks
Sorry, link:
You can set the content padding to 0 in "Customize > Layout > Container".
