Menu icon Foundation
Is there a class to make rows width: 100%?

I've used 'expanded' which adds `max-width: none` but I still have to tell each row to have `width:100%;`.

Is there an existing class that does this?

gridRowscolumnscss

I've used 'expanded' which adds `max-width: none` but I still have to tell each row to have `width:100%;`.

Is there an existing class that does this?

Corey Schaaf 11 days ago

Adam, 

If you want something to be a full row it depends on the structure of how you setup your html. For example, the following will give me a full row. But the purpose of using this is when you need to use a row on a container. This will not give you 100% of the browser window if that's what your looking for. 

<div class="column row">
  Row column
</div>

If your html syntax looks like this where you have nesting and you're trying to achieve a full with row that spands the entire width of your device / screen - this ALSO WILL NOT WORK. 

<div class="row">
  <div class="small-12 column">
    <div class="column row">
      Row column
    </div>
  </div>
</div>

The reason for this is the column row now sits inside a container that is contained within the boundries of the $global-width variable in the _settings.scss file.  By default, I believe it's set to 1200px. 

I believe this is also true when you try to use:

<div class="expanded row">
</div>

All that happens when adding expanded is that it removes the $global-width variable from a pixesl to be a percentage of the container it's sitting inside of. Again, rows by default are 1200px wide (unless the variable is changed in settings). 

You could also post your markup and that could help troubleshoot as well. 

The following as a top level container will give me a full with row from the left of my screen to the right of my screen. 

<div class="row expanded columns">
  Row Column
</div>



Adam Sherman 2 days ago

Thanks Corey!