A Pen by jakob-e.

index.html

<main>
     <article>
      <header class="breakout">
        <h1>Responsive break out of parent element</h1>
      </header>
      
      <div class="breakout">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/ae.jpg" />
      </div>  

      <div class="breakout">
        <blockquote>
          <p>We cannot solve our problems with the same thinking we used when we created them</p>
        </blockquote>
        <p>Albert Einstein</p>
      </div>   
  
      <h2>The problem</h2>
      <p>
        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. 
      </p>
      <p>In general you are left with one of two choices:
        <ul>
          <li>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.  
          </li>
          <li>Target all the nested elements individually (.container > *), create a faux or pseudo-element background on the wrapper and don't forget the media queries.
          </li>
      </ul>
      </p>
      
      <h2>The Solution</h2>
      <p>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. 
      </p>
    <code>
    &lt;main&gt;
      &lt;article&gt;
        &lt;h1&gt;Lorem ipsum&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;

        <em>&lt;div class="breakout"&gt;
          &lt;img src="image.jpg" /&gt;
        &lt;/div&gt;</em>

        &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;      
      &lt;/article&gt;
    &lt;/main&gt;
    </code>
    
    <strong>The wrapper:</strong>
    <code>
    /**
     * 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 
     */ 
    .breakout {
      position:relative;
      display:table;
      width:100vm; 
      left:50%;
    }
    </code>
    <strong>The content:</strong>
    <code>
    /**
     * 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;
    }  
    </code>    
    
    <h2>The bugs and the fix:</h2>
    <p>Sadly browsers sucks at handling vm units - especially mobile ie6 incarnated (Safari on iOS7)... and once again we have to turn to JavaScript.</p>
    
    <strong>The script:</strong>
    <code>
    &lt;script&gt;
      
      function vwFix(){
        var ww = window.innerWidth + 'px';
        var el = document.getElementsByClassName('breakout');
        for(var i=0,l=el.length;i&lt;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');
      
    &lt;/script&gt;
    </code>

    <footer class="breakout">
      <p>Please comment :-) <br>
         Note! Because of the iframe on codepen this page might not show correctly unless in debug view. </p>
    </footer>
  </article>
  <div class="tools">
    <a href="#" class="trans">CSS Transitions:</a>
    <a href="#" class="sizes">Random max-widths</a> 
  </div>
</main>

    

Responsive-break-out-of-parent-element.markdown

Responsive break out of parent element

Please comment :-)

Note! Because of the iframe on codepen this page might not show correctly unless in debug view.

A Pen by jakob-e on CodePen.

License.

script.js

$(window).on('resize',function(){
  $('.breakout').width(window.innerWidth);
}).trigger('resize');

















// Just some quickly added tools 
$('.trans').on('click',function(e){
  e.preventDefault();
  $('main').hasClass('transitionsenabled') ? 
  $('main').removeClass('transitionsenabled') :
  $('main').addClass('transitionsenabled'); 
})
$('.sizes').on('click', function(e){
  e.preventDefault();
  $('.breakout').each(function(){

    var width = (Math.round(Math.random() * 1000) + 200) + 'px';
    $('> *',$(this)).css( { 'max-width' : width  } );
    console.log(width)
  })
});

style.scss

@import url(http://fonts.googleapis.com/css?family=Lato:300,400);

*,*:before,*:after{
  box-sizing:border-box;
  margin:0;padding:0;
}
header,main,footer,nav,aside,article{
  display:block;
  font-family:'lato', sans-serif;
}
h1 { font-size:1.8em;   margin-bottom:0; font-weight:300; text-transform:uppercase; }
h2 { font-size:1.5em; margin-bottom:0; }
p  { font-size:1em;   margin-bottom:1.5em; font-weight:300; }




html,body { 
  line-height:1.5; 
  width:100%;
  overflow-x:hidden;
  background:SlateGray;
}




article { 
  background:white;
  max-width:700px; 
  margin:0 auto; 
  padding:2.5em 2.5em 0; 
  @media (max-width:580px){
    padding:1.5em 1.5em 0; 
  }
}

// The wrapper
.breakout {
  position:relative;
  display:table;
  width:100vw;
  left:50%;
}

// The content
// Generic
.breakout > * {
  position:relative; 
  margin-left:auto; 
  margin-right:auto;   
  left:-50%;
}

// Custom
// Header 
header h1 {
  max-width:800px;
  background:#f1f1f1;
  color:#808080;
  padding:0.6em 2em; 
  text-align:center;
}
// Image
.breakout > img   { 
  display:block;
  display:block;
  width:100%;
  max-width:960px;
  min-width:320px;
}
// Quote
blockquote {
  text-align:center;
  font-size:1.8em; 
  max-width:800px;
  background:#f1f1f1;
  padding:1em 2.5em 2em; 
  color:#808080;
  @media (max-width:580px){
    padding:1em 2em 2em; 
    font-size:1.1em; 
  } 
  
  &:before { 
    font-family: Georgia, serif;
    content: '\201C';
    position:absolute;
    top:0.1em;
    left:0.2em; 
    font-size:3em;
    color:#ccc;
    border-left:2px;
  }
  p { margin:0;}
}
blockquote + p {
  max-width:800px; 
  text-align:right; 
  padding-right:1.5em; 
  top:-2em; 
  font-style:italic; 
  color:#ccc;
}

footer p {
  //text-align:center;
  max-width:700px;
  background:darken(SlateGray,5%);
  color:white;
  padding:1.5em 4em;
  @media (max-width:580px){
    padding:1.5em 1.5em; 
  }  
}







code {
  margin-bottom:1.5em;
  background:#f1f1f1;
  display:block; 
  white-space:pre-wrap;
  font-size:0.75em; 
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}
ul { padding-left:1em; }

.tools { 
  background:#282828;
  position:fixed; width:100%; top:0; z-index:20; text-decoration:none; 
}
.trans, 
.sizes { 
  margin:0 10px; color:white; text-decoration:none; display:block; float:left; }
.trans:after { content:' OFF'}
main.transitionsenabled {
  .trans:after { content:' ON'}
  .breakout,
  .breakout > * {
    transition:all .5s; 
  }
}