Foundation
-
FollowReplies
-
Grid Width not Full Page
bySteve Valet Friday, December 11, 2015 at 5:46 PM EST
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>
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.
Rows have a max-width of 1200 pixels. add the class expanded to the row to make them 100% width.