Menu icon Foundation
Full width nested row?

So I know how to make full width rows using "row expanded" on a top level row, however can you force a nested row to be full screen width?

expanded row

So I know how to make full width rows using "row expanded" on a top level row, however can you force a nested row to be full screen width?

Rafi Benkual over 3 years ago

You can see it here: http://codepen.io/rafibomb/pen/PNeMJm

Are you looking to have the .expanded class cascade all the way down to nested rows? There is still column padding on the outer expanded row that will prevent the inner from being full width.

To get around that, you could tack on the collapse class as well. 

<div class="row collapse expanded">

Ben Wills over 3 years ago

Hi Rafi

 

I think what i'm getting at was missed, this is what i'm trying to achieve, do you think its possible?

<div class="row">
  <div class="column outer">
    
    <div class="row">
      <div class="column inner">
        Standard content
      </div>
    </div>
    
    <div class="row expanded">
      <div class="column inner">
        Full screen width content
      </div>
    </div>
    
    
    <div class="row">
      <div class="column inner">
        Standard content
      </div>
    </div>
    
  </div>
</div>