CODEWITHSUNDEEP
csszurb-foundationzurb-foundation-6
Amy
Amy

Reputation: 946

Foundation 6 nesting default width row inside expanded row

I want the background of a row full width and the content within it a standard width row.

I'm attempting to do this by created a expanded width row, applying a background to it and nesting a standard row inside it. However the nested row is full expanded width despite not having the expanded class.

Here is my attempt

<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>

<div class="row expanded">
  Expanded row
  <div class="row">
    <div class="large-12">Nested Row</div>
  </div>
</div>

http://codepen.io/onlyslightly/pen/beqZwo

Is there a way to nest standard width rows inside expanded width rows? Or is there a more appropriate way to perform this action?

Upvotes: 1

Views: 1288

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362780

This is a known issue that was introduced in Foundation 6.2.1: https://github.com/zurb/foundation-sites/issues/8886

As you can see in 6.2.0 the inner row works fine: http://codeply.com/go/UfbFrTyThU

The issue is still open, but you can workaround it using some extra CSS...

.row .row {
    max-width: 75em;
}

http://codeply.com/go/vyjVAwXkn4

Upvotes: 2

Related Questions