No Container Website Issue

[Heike_Eco]

Hi there,

I want my website to have no containers so that the backgrounds of my sections would cover the whole part of the screen ei not cut of at the sides with a white space on both sides of the blog. So I added this to my CSS:

.x-container.max {
width: 100%;
max-width:inherit;
}

However, this stretches everything out on my website including the header to the very edges of the page which makes it look very scattered like so:

I would like my website content to be more contained yet still have the sectiosn backgrounds run across the whole background whether people zoom in our out like so:

I’ve tried removing the CSS and just playing around with the customizing Layout & Design section regaridng site witdth and site max width.

Could I please get some assistance with what I am trying to achieve?

Thank you in advance!

[ruenel]

Hello There,

Thanks for writing in and the very detailed post information. To remove your issue, you must remove your custom css. Having this code does not contribute and will even get you more conflicts. Remove the code first.

.x-container.max {
  width: 100%;
  max-width:inherit;
}

What you really need to accomplish what you want is already built in the theme. Simply edit your page and change your page template using the Blank - No Container | Header, Footer. This page template will give you a fullwidth section width a controlled content width as shown in the example site. For more details about the different page templates in the theme, please check this out: https://theme.co/apex/forum/t/features-page-templates/50/1

Hope this helps. Please let us know how it goes.

[Heike_Eco]

Hi Rue Nel

Thanks so much for getting back to me. I have removed the CSS as suggested, but the page now looks like its sections have borders on wither side ie not full width. I have tried playing around with the sections widths but this does not appear to change it much. Is there anything else I should be doing?

Thanks,
Heike

[Alaa]

Hi Heike,

You need to edit each section and click on “Remove Spacing” from each row, just as in this screenshot:

Thanks.

[Heike_Eco]

Oh my god Alaa - it worked!!! I’ve been doing this wrong for a whole year and now it finally works! Thank you soooo much for helping me out. I’m so grateful and appreciative of your help. I hope you have the most wonderful day! And thank you thank you thank you!

[Prasant]

Thanks for good words. You are most welcome.