Responsive break out of parent element

We cannot solve our problems with the same thinking we used when we created them

Albert Einstein

The problem

Making a child element break out of its parent container is a thing that almost always causes a world of pain, a messy stylesheet and a bad developer-designer relationship.

In general you are left with one of two choices:

Make the widths larger than 100%, try to counter the wrapping padding and add media queries to fix the negative margins when the content starts to overflow the viewport.
Target all the nested elements individually (.container > *), create a faux or pseudo-element background on the wrapper and don't forget the media queries.

The Solution

Rather than focusing on the parent and or trying keep track of all the child elements – take the evil wrapper pill and swallow your pride. Visual explanation


<main>
<article>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet.</p>
<div class="breakout">
<img src="image.jpg" />
</div>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</main>

The wrapper:


/**
* 1 Position the wrapper relative to the parent element
* 2 Make the wrapper fit the content height
* 3 Set the width to match the width of the viewport (100vm)
* 4 Push the wapper to the center of the parent element
*
* Note! Remember to add html,body { overflow-x:hidden; } to
* prevent horizontal scrolling
*
* Note! If the left and right padding of your wrapper are
* not the same – adjust the .breakout margin-left
* breakout-margin-left: (wrapper-padding-right - wrapper-padding-left)/2
*/
.breakout {
position:relative;
display:table;
width:100vw;
left:50%;
}

The content:


/**
* Generic content style
* 1 Position the content relative to the wrapper
* 2 Center the content
* 3 Pull the content -50% to the left and hereby
* back to the center of the page
*/
.breakout > * {
position:relative;
margin-left:auto;
margin-right:auto;
left:-50%;
}
/**
* Custom content style
* Note! min-width will cause cropping
*/
.breakout > img {
display:block;
width:100%;
max-width:960px;
min-width:320px;
}

The bug and the fixes:

Sadly browsers sucks at handling vm units - especially mobile ie6 incarnated (Safari on iOS7)... and once again we have to ~~turn to JavaScript.~~ make workarounds

As of October 19, 2015 91% of iDevices are running iOS8+

Media Query Fix:

Benjamin Morel made a mixin to handle viewport units on iOS 7 that produces the following queries:


@media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
.breakout { width: 768px; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
.breakout { width: 1024px; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
.breakout { width: 320px; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
.breakout { width: 480px; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: portrait) {
.breakout { width: 320px; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: landscape) {
.breakout { width: 568px; }
}

JavaScript Fix:


<script>
function vwFix(){
var ww = window.innerWidth + 'px';
var el = document.getElementsByClassName('breakout');
for(var i=0,l=el.length;i<l;++i){ el[i].style.width = ww; }
};
vwFix();
window.addEventListener('resize', vwFix);
// ...or if you prefer jQuery
$(window).on('resize',function(){
$('.breakout').width(window.innerWidth);
}).trigger('resize');
</script>