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 );
view raw global.js hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

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

Let's Talk