True full width pages with page title at the top

[armintz]

I want to create and design the pages of my site with Cornerstone, just like I did on my home page… except on pages that are not the home page, I of course want the page title displayed at the top…

But “full width” doesn’t stretch to the edges of the browser, and all of the “no container” templates hide the page title… that’s not good UX and bad for SEO.

Surely there’s something simple I’m missing?

[christopher]

Hi there,

I suggest that you go to X > Theme Options > Layout and Design and set the options there to make sure it will be full width. Then you can use the Default Template for all pages as it will reflect whatever you set in the Theme options.

After that, kindly get back to us with the URL of your website and what you want to do in the homepage, then we will give you proper CSS code which will affect only the homepage which apparently you want to have a different layout than the rest of the website.

Thank you.

[armintz]

I’ve set the X Layout and Design settings to be “fullwidth”:

And I’ve added both “Layout - Fullwidth” and “Default Template” to a random page, see this page here which is currently set to “Default Template” (secure note with user/pass to view the site is attached to this post).

And the page is still not true full width as the content is inside a box:

Again, choosing the “no container” template seems to be the only way to make a true full-width (such as the way it is on my home page) but this removes the page title.

According to the X Facebook group what I’m looking to do is not possible and if I want true full-width I need to manually add breadcrumbs / page titles… true?

[ruenel]

Hello There,

Thanks for the updates and the very detailed information. Please keep in mind that Blank - No Container templates is a fully fullwidth page with no page titles. If you use this page template, you will have to create the page titles in your contents instead.

If you still would like to use the Layout - Fullwidth and extend it to a fully fullwidth page, you will need to insert a custom css in your Theme Option’s custom css section. please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.page-template-template-layout-full-width .site .x-container.max.width.offset {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

Remember:
This code will only work if you use the Layout - Fullwidth page template.

Please let us know how it goes.

[armintz]

Thanks, this works.

Can you tell me why the background image works on the home page but is not working on all other pages (where it just shows as a solid white background)?

Working
Not Working

[friech]

Hi There,

That is because of the layout template’s entry-wrap white background-color.

Please add this to Theme Options > CSS

.page .entry-wrap {background-color: transparent;}

Hope it helps,
Cheers!

[armintz]

I don’t follow why custom css is needed to make the background image chosen in the theme settings appear, but your code worked so i will move on. Thanks.

[Alaa]

Hi @armintz
As my colleague @friech mentioned, in posts single views, the entry-wrap div has a white background color as you are using “Integrity Light” stack.

Thanks.