# Responsive break out of parent element

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

Albert Einstein

## Update!

Please consider using this calc based method instead (without the need of a wrapping element :-)

## 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>`
For the visually oriented
CSS Transitions: Random max-widths Reset Full page