[Support request] Container Width

[Paul]

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

[Tom]

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 🙂

[Paul]

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

[Paul]

Sorry, link:

http://okddev.okdpreview.net/

[Tom]

You can set the content padding to 0 in “Customize > Layout > Container”.

[Author]

Posts