0

Using FoundationCSS, if I use the basic grid system by defining a row and then columns, I get a grid that is 1000px wide on desktop.

<div class="row">
  <div class="small-12 columns">
    ...
  </div>
</div>

However, if I do the same thing, but omit the "row", I get a full width layout.

<div class="small-12 columns">
  ...
</div>

Are there any side affects I should be aware of by omitting the "row"?

Colin Marshall
  • 2,142
  • 2
  • 21
  • 31
mcardleliam
  • 158
  • 8
  • possible duplicate of [zurb foundation is it possible to have full row width](http://stackoverflow.com/questions/11751391/zurb-foundation-is-it-possible-to-have-full-row-width) – MuntingInsekto Sep 24 '15 at 00:29
  • 1
    it seems that what is on either side of `` is cut off by media queries, so you can try it but I would expect smaller screens to chop some content off. – Mousey Sep 27 '15 at 22:23

1 Answers1

1

The safest thing I found was to add a new class to make the container full-width:

.full-width {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}

And use it in the html:

<body>
  <div class="row full-width">
    <div class="small-12 columns">
      ....
    </div>
    <div class="row"
      <div class="small-6 columns>...</div>
      <div class="small-6 columns>...</div>
    </div>
  </div>
</body>
mcardleliam
  • 158
  • 8