X Pro - Full-width header with boxed content

[smoothdev]

Hi

I’m trying to re-create a X-Theme layout inside PRO and having challenges with having a full-width header and boxed content.

Previously, the header was not inside the site class, so the box didn’t apply to it, however now, the header is inside the x-site class, which is forcing it to fit within the boxed region.

X-Theme:

<header class="masthead masthead-inline" role="banner">...</header>
<div id="top" class="site">...</div>

Pro:

<div id="x-root" class="x-root">
  <div id="x-site" class="x-site site">
    <header class="x-masthead" role="banner">...</header>
  </div>
</div>

Under Theme Options:
Layout and Design > Site Layout: Fullwidth
Site Width: 88%
Site Max Width: 1100px
Content Width: 88%

I’ve also had to add the following style to keep the background color as I want it, but I also want the boxed content to have a white background.

.site, .x-site {
background-color:transparent;
}

The issues I’m noticing is the spacing appearing around the slider on the home page (not going all the way to the edge - even though it’s set to have no container.

The other issue is that the rest of the content is going to the full edge of the container (which really should have padding).

Any assistance or suggestions on how I can fix this would be greatly appreciated.

I also tried this styling tweak as a work-around, which was close, but wanted to see if there was a better solution:

.x-main.full {
max-width: 1100px;
margin: 0 auto;
}

article {
background-color: white;
}

[ruenel]

Hello James,

Thanks for writing in! You are already on the right track. Adding the custom CSS should display the box content area:

.x-main.full {
  max-width: 1100px;
  margin: 0 auto;
}

article {
  background-color: white;
}

You will just have to edit the homepage and in your first section, disable the Global Container, set the width and maximum width to 100% in your row settings.

Best Regards.

[smoothdev]

Perfect - Thanks for pointing out that Global Container.

[prakash_s]

Hello James,

Glad that @ruenel were able to help you. Please feel free to reach us if you have any query regarding our theme and theme settings.

Thanks