Menu icon Foundation
Grid Width not Full Page

I'm trying to figure out how to get the Foundation Grid to scale to full page. Right now it's just about 2/3rds of the page, and no matter what I monkey with, it doesn't change.

In the attached image, you can see it's centered nicely, but doesn't fit to 100% as I was expecting.

How can I get the grid to scale to almost the full page?

<div class="row">
    <div class="large-12 columns">
        <div class="panel">
            Foo
        </div>
    </div>
</div>
            

         

Grid scale

sitesgrid

I'm trying to figure out how to get the Foundation Grid to scale to full page. Right now it's just about 2/3rds of the page, and no matter what I monkey with, it doesn't change.

In the attached image, you can see it's centered nicely, but doesn't fit to 100% as I was expecting.

How can I get the grid to scale to almost the full page?

<div class="row">
    <div class="large-12 columns">
        <div class="panel">
            Foo
        </div>
    </div>
</div>
            

         

Grid scale
Brandon Arnold almost 4 years ago

Rows have a max-width of 1200 pixels. add the class expanded to the row to make them 100% width.

Steve Valet almost 4 years ago

Hmm, perhaps I didn't do it correctly, didn't seem to make a difference. Here is what I did:

<div class="row expanded">
    <div class="large-12 columns">
        <div class="panel">
           FOO
        </div>
    </div>
</div>

Brandon Arnold almost 4 years ago

Like this?
http://codepen.io/zurbrandon/pen/VeezNd

Are you on Foundation 6?

Steve Valet almost 4 years ago

Hey Brandon,

I am on Foundation 6, but the same code doesn't behave like that. If I add the following, it does behave like yours

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

Not sure what's going on with my install

Brandon Arnold almost 4 years ago

super odd, we haven't seen this broken on any reports, so i'm not sure if a version number would chnage anything, but that was in 6.0.5 where i showed it working.

Steve Valet almost 4 years ago

It's hacky, but I used the "FullWidth" thing. Perhaps there's something messed up with my project, just don't know.