Modify Full Width Landing Page Wrapper

[imagemarketParticipant]

Modify Full Width Landing Page Wrapper

I tried the previously posted solution (#3047) it’s a step in the right direction for what I’m trying to accomplish, which is display full-width table data, from screen edge to screen edge. Let’s assume I don’t care about a horizontal page scroller because pages created with this custom template would be for internal use only.

My best guess is that the site wrapper in the /Site Containers section of the CSS file is constraining the expansion of content I’m looking for.

.site-inner,
.wrap {
    margin: 0 auto;
    max-width: 1200px;
}

But I’m failing at creating a duplicate version of the wrapper just for my Custom Full Width Template, that won’t affect the whole site.

This is what I tried so far, but ALL the pages are affected:

.full-width,
.site-inner,
.wrap {
margin: 0 auto;
max-width: 100% !important; /*width: 1200px; */
}

Is the solution simple?

---

[Marcy DiazKeymaster]

You may want to create a new page template that adds a body class, so that you can use it in your CSS.

But you can do it on a page-by-page basis. There is a field down below the page editor in the Genesis Layout Settings, so that you can add a Custom Body Class. if you don’t see it, you can click on Screen Options in the upper right hand corner.

Then if you add new-landing to Custom Body Class, then your CSS would be:

.new-landing .site-inner,
.new-landing .wrap {
margin: 0 auto;
max-width: 100%;
}

---

[Author]

Posts