Full width element in middle of page

Written by Bill EricksonPublished on January 16, 2014Updated on December 5, 2018

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);