Full width element in middle of page

You might have a piece of content that needs to go full width, but is contained by a non-full-width element (like your page’s content area). This Javascript snippet will find all elements with a class of .explode-width and make them go full width.

// Make an element in the page go full width
// Author: Bill Erickson
// URL: http://www.billerickson.net/code/full-width-element-middle-page/
function explodeWidth() {
var browserWidth = $(document).width();
var wrapWidth = $('.site-inner .wrap').width();
var margin = ( ( browserWidth - wrapWidth ) / 2 );
$('.explode-width').css( 'margin-left', - margin ).css( 'margin-right', - margin );
}
explodeWidth();
$(window).resize(explodeWidth);
view raw global.js hosted with ❤ by GitHub

javascript

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk