CODEWITHSUNDEEP
csszurb-foundation
Ryan McDonough
Ryan McDonough

Reputation: 10012

Full width rows and surrounding container

I'm using the latest version of Zurb Foundation. I'm wanting to use full width layout and make use of the off canvas element.

So I have a demo highlighting the issue, however I want full width rows but still be able to surround that row with a full width background colour. (E.g http://foundation.zurb.com/) like the hero block.

For simplicity this is the code in question:

HTML

 <section class="content-block">
      <div class="row full-page">
          <div class="large-12 columns">
              <h3>We&rsquo;re stoked you want to try Foundation! </h3>
              <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
              <p>Once you've exhausted the fun in this document, you should check out:</p>             
          </div>
        </div>
        </section>

CSS:

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


.content-block {
    background:#000;
}

I would expect that the full width of the page would be black.

Upvotes: 0

Views: 876

Answers (1)

nkmol
nkmol

Reputation: 8091

This happens because on the .columns elements they use float. This make the element out of the flow, thus does not size on it's content anymore(because the content isn't in the same flow and just overflows).

To force the element to stay in the same flow, you can use:

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

jsFiddle

Upvotes: 1

Related Questions