Menu icon Foundation
unexpected row behavior

is there a global setting that defaults the behavior of all rows to act like the top-bar? or whatever the design needs to be. why is there a margin on both sizes for a row with 12 columns at larger doc screen sizes?

i'm seeing this on chrome
Version 33.0.1750.117 m

<div  class="top-bar"></div>

<div class="row">
  <div class="small-2 large-4 columns">...</div>
  <div class="small-4 large-4 columns">...</div>
  <div class="small-6 large-4 columns">...</div>
</div>
            

         

Foundation

rowcolumnfull width

is there a global setting that defaults the behavior of all rows to act like the top-bar? or whatever the design needs to be. why is there a margin on both sizes for a row with 12 columns at larger doc screen sizes?

i'm seeing this on chrome
Version 33.0.1750.117 m

<div  class="top-bar"></div>

<div class="row">
  <div class="small-2 large-4 columns">...</div>
  <div class="small-4 large-4 columns">...</div>
  <div class="small-6 large-4 columns">...</div>
</div>
            

         

Foundation
Robin Cox over 5 years ago

to remove margins and paddings on rows, write this in your css/scss:

.row { margin:0; padding:0; }

Rows also has a max-width set, to let rows take up the entire viewport with, write this in your css/scss:

.row { max-width: 100%; }

And you could even set them at 100% as standard:

.row { width: 100%; }

Sunny Yuen over 5 years ago

the max-width did it. thanks for much!

Robin Cox over 5 years ago

Glad to help :)