title: Responsive fixed width 3 column layout with full width drawer in Desktop and Mobile
body: <p>I have a 3 column tile responsive design that's 1 column in mobile and 3 columns in desktop and each tile has a content drawer that needs to stretch the FULL width of the screen (complete with blue background).</p>
  
  <p>I have a working model in a pen below but can't get the drawers to stretch full width?</p>
  
  <p>Not sure if it's CSS or if there's a more optimum  HTML layout as doing the mobile first design and it works, just not in Desktop/wider views.</p>
  
  <p><a href="https://codepen.io/trevcis/pen/ZMNNQW" rel="nofollow noreferrer">Codepen</a>:   </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  function openDrawer(tile) {
  
      var drawer = $(tile).attr("drawer");
  
      if ( $(tile).hasClass("ESGActive") ){ // Already is active?
           $(".ESGTile").removeClass("ESGActive");
           $("#" + drawer).slideUp();
      } else {
        // Get all tiles with class="ESGActive" and remove it
        $(".ESGTile").removeClass("ESGActive");
  
        // Get all elements with class="ESGDrawer" and hide them
        $(".ESGDrawer").slideUp();
  
        // Show the current tab drawer, add "active" class to the button
        $("#" + drawer).slideDown();
        $(tile).addClass("ESGActive");a
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  .ESGTiles &gt; div{
    display:inline;
    padding:0;
  }
  .ESGDrawer {
    float:left;
    margin:0;
  }
  .ESGTile &gt; img{
     display:none;
  }
  @media screen and (min-width: 1024px){
     .ESGTile &gt; img, .FAQTile &gt; img {
        display:block;
     }
  
     .ESGTiles &gt; div{
       padding:15px;
     }
  }
  
  @media screen and (max-width: 1024px){
   .ESGDrawer {
    margin-top: 0!important;
    padding: 2em 0!important;
   }
   
   .FAQTile img, .ESGDrawer img {
    display: none;
   }
   
   .ESGTile, .FAQTile {
    margin: 0.2em 0;
   }
   
  span.drawerToggle {
      position: relative;
      width: 24px!important;
      height: 24px!important;
      float:right;
  }
  
  .call-to-action img {
  width: 70%;
  margin: 0 auto 2em auto;
  }
   
  }
  
  .FAQTile {
   background: #36872a!important;
   width: 100%;
  }
  
  .drawerToggle{
      position: relative;
      width: 30px;
      height: 30px;
      float:right;
  }
  .drawerToggle:before, .drawerToggle:after{
          content: "";
          position: absolute;
          background-color: white;
          transition: transform 0.25s ease-out;
   }
  
  .drawerToggle:before{
          top: -1px;
          left: 50%;
          width: 2px;
          height: 100%;
          margin-left: -1px;
   }
  
  .drawerToggle:after{
          top: 50%;
          left: 0;
          width: 100%;
          height: 2px;
          margin-top: -2px;
    }
      
  /**.ESGTile:hover .drawerToggle:before{ transform: rotate(90deg); } 
  .ESGTile:hover .drawerToggle:after{ transform: rotate(180deg); }**/
     
  .ESGActive .drawerToggle:before{ transform: rotate(90deg); } 
  .ESGActive .drawerToggle:after{ transform: rotate(180deg); }
  
  
  
  
  
  .ESGTile, .FAQTile {
   display: block;
   position: relative;
   cursor: pointer;
   overflow: hidden;
   background-color: #1f335a;
   color: #fff;
   z-index: 100;
   font-weight: 700;
  }
  
  .ESGTile h3, .FAQTile h3 {
   color: #fff;
  }
  
  .ESGTile:hover {
   background-color: #344794;
   color: #fff;
   text-decoration: none;
  }
  
  .FAQTile:hover {
   background-color: #00a651!important;
   color: #fff;
   text-decoration: none;
  }
  
  .ESGActive {
   background: #344794;
  }
  
  .ESGActive:after {
   bottom: -3px;
   left: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   z-index: 120;
   pointer-events: none;
   border-color: rgba(255, 255, 255, 0);
   border-bottom-color: #fff;
   border-width: 10px;
   margin-left: -10px;
  }
  
  .ESGTile h3, .FAQTile h3 {
   font-size: 1.2em;
  }
  
  
  .ESGLabel, .FAQLabel {
   margin: 0;
   display: block;
   padding: 0.8em 15px;
  }
  
  .ESGDrawer {
   display: none;
   background: #1f335a;
   color: #fff;
   padding: 4em 0;
   margin-top: 0.3em;
   z-index: 90;
   position:inline-block;
   width:100vw;
   left:0;
  }
  
  .ESGDrawer h4 {
   font-size: 1.8em;
   margin-bottom: 1em;
  }
  
  .ESGDrawer p {
   line-height: 1.4em;
  }
  
  .ESGDrawer p.cta-wrapper {
   margin: 0.3em 0 0 0;
  }
  
  .ESGDrawer p.cta-wrapper a:before {
   bottom: 0;
  }
  
  .ESGDrawer a:link, .ESGDrawer a:hover, .ESGDrawer a:visited {
   text-decoration: none;
   color: #fff;
  }
  
  hr {
   display: none;
  }
  
  .call-to-action {
  padding: 3em 0;
  }
  
  footer {
  margin-top: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
   &lt;div class="row"&gt;
  
    
    &lt;!-- TILE 1 *********************** --&gt;
    &lt;div class="col-xs-12 col-md-4"&gt;
     
     &lt;!-- Tile --&gt; 
     &lt;a class="ESGTile" onclick="openDrawer(this)" drawer="title-1"&gt;
      &lt;img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640"&gt;
      &lt;h3 class="ESGLabel"&gt;Title 1&lt;span class="drawerToggle"&gt;&lt;/span&gt;&lt;/h3&gt;
     &lt;/a&gt;
   
     &lt;!-- Drawer --&gt;
     &lt;div id="title-1" class="container-fluid ESGDrawer"&gt; 
      &lt;div class="container ESGMiddleDrawerContent"&gt;
       &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-md-6"&gt;
         &lt;h4&gt;Title 1&lt;/h4&gt;
         &lt;p&gt;Lorem ipsum&lt;/p&gt;&lt;p&gt;Lorem ipsum&lt;/p&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;!-- TILE 2 *********************** --&gt;
    &lt;div class="col-xs-12 col-md-4"&gt;
     
     &lt;!-- Tile --&gt; 
     &lt;a class="ESGTile" onclick="openDrawer(this)" drawer="title-2"&gt;
      &lt;img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640"&gt;
      &lt;h3 class="ESGLabel"&gt;Title 2&lt;span class="drawerToggle"&gt;&lt;/span&gt;&lt;/h3&gt;
     &lt;/a&gt;
   
     &lt;!-- Drawer --&gt;
     &lt;div id="title-2" class="container-fluid ESGDrawer"&gt; 
      &lt;div class="container ESGMiddleDrawerContent"&gt;
       &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-md-6"&gt;
         &lt;h4&gt;Title 2&lt;/h4&gt;
         &lt;p&gt;Lorem ipsum&lt;/p&gt;&lt;p&gt;Lorem ipsum&lt;/p&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;  
    
    &lt;!-- TILE 3 *********************** --&gt;
    &lt;div class="col-xs-12 col-md-4"&gt;
     
     &lt;!-- Tile --&gt; 
     &lt;a class="ESGTile" onclick="openDrawer(this)" drawer="title-3"&gt;
      &lt;img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640"&gt;
      &lt;h3 class="ESGLabel"&gt;Title 3&lt;span class="drawerToggle"&gt;&lt;/span&gt;&lt;/h3&gt;
     &lt;/a&gt;
   
     &lt;!-- Drawer --&gt;
     &lt;div id="title-3" class="container-fluid ESGDrawer"&gt; 
      &lt;div class="container ESGMiddleDrawerContent"&gt;
       &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-md-6"&gt;
         &lt;h4&gt;Title 3&lt;/h4&gt;
         &lt;p&gt;Lorem ipsum&lt;/p&gt;&lt;p&gt;Lorem ipsum&lt;/p&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;  
    
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>