Full Width Section with Container

[kerri]

Hey. I’m working on a few new pages on my website and wish the layout to be similar physically to blog posts. The blog posts themselves have a full-width banner across the top, but the rest of the content has a container.

I’m trying to achieve the same result building a page with cornerstone, but can’t figure out how. If I want a full-width section (with the background being my banner) I must use “blank-no container”. By doing this, I obviously lose the container on the rest of the page. And the same the other way. If I want a container, it affects the section containing the banner.

Just to clarify, here’s what I mean. The first example is the recipe built on a blog post, the second is on a page using cornerstone.

Recipe: Spicy Mexican Pickles - These Foreign Roads

Recipe: Spicy Mexican Pickles - These Foreign Roads

If this layout is possible on a blog post, it must be possible on a regular page… Please help.

Thanks

[friech]

Hi There,

Thank you for writing in, how was this banner added?

Was this a plugin or through a child theme customization? Maybe you can apply this to pages too and just use the default template on your pages.

The “Default Template” page is the same with the template of the posts, unless the custom code or the plugin is configure to affect the posts only.

Please clarify how was that banner added/customize.

Cheers!

[kerri]

I believe this is what was used:

---

jQuery (’.single-post .entry-featured’).insertBefore(’.site > .x-container’);

(function($){
$(’.single-post .entry-header’).insertBefore( $(’.single-post .entry-featured .entry-thumb’) );
})(jQuery);

$(document).ready(function() {
$(“body”).children().each(function() {
$(this).html($(this).html().replace(/ /g," "));
});
});

---

I’m not entirely sure, I found the code either on this forum or elsewhere. I have no idea what any of this means…

[paul.r]

Hi,

You can add a container to your No Container Page by adding a class to your ROW.

Then add this in Theme Options > CSS

.mycontainer {
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
    padding: 0 60px 60px;
}

Hope that helps.

[kerri]

Awesome, I’ll give that a try. Thank you!

[friech]

You’re welcome, let us know how it goes,

Cheers!