Menu icon Foundation
Full Width error in F5

Hello,

I recently started working with F5 and actually I am making my first steps here so bare with me please in case I missed the obvious.

Now let me mention first that I searched the entire forum and the did my research on the internet before posting here but couldn't solve this.

My problem is that I cannot make a row have the full width of the screen no matter what I do.

I read other posts that had some solutions but still can't make this work.

Now the the thing is.
If I change in css the row settings which are currently:

.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5rem;
*zoom: 1; }

If I make max-width: 100%; here it messes my whole site.
So here is what I did.

I copied that thing and gave it a name .row.footer for example and change of course max-width to 100% and nothing!

It still appears within the grid limits foundation has.
I can't make it to work and I am sure I am missing something pretty easy here but I am a newbie.

Any help at all would be appreciated.

Thanks,
George

rowfull widtherrorF5

Hello,

I recently started working with F5 and actually I am making my first steps here so bare with me please in case I missed the obvious.

Now let me mention first that I searched the entire forum and the did my research on the internet before posting here but couldn't solve this.

My problem is that I cannot make a row have the full width of the screen no matter what I do.

I read other posts that had some solutions but still can't make this work.

Now the the thing is.
If I change in css the row settings which are currently:

.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5rem;
*zoom: 1; }

If I make max-width: 100%; here it messes my whole site.
So here is what I did.

I copied that thing and gave it a name .row.footer for example and change of course max-width to 100% and nothing!

It still appears within the grid limits foundation has.
I can't make it to work and I am sure I am missing something pretty easy here but I am a newbie.

Any help at all would be appreciated.

Thanks,
George

This post has been closed. No new replies can be added.

Steve Trask over 5 years ago

Hey George,

Is there a chance of a link to your site as I just tried changing max-width to 100% and looks to be working fine: http://cdpn.io/jHLwJ

I think there is something not right on your site somewhere if you post it we can try and figure that out to help you out.

Thanks

Steve

Tom Hogan over 5 years ago

George,

Adding an element with a class of row creates a horizontal block which will contain your vertical columns. The width of the row and the number of columns it will contain will depend on whether or not you downloaded the default version of Foundation or customized it. The default width is 62.5em and 12 columns. If you customized your download, your mileage will vary.

In any event, to avoid having your content constrained by the grid, place your content outside the row class.

So to create a footer that stretches across your screen with 3 columns contained inside your grid within the footer, your markup would look something like the following:

<div class="footer">
   <div class="row">
     <div class="4 columns">
         your content
     </div>
     <div class="4 columns">
         your content
     </div>
     <div class="4 columns">
         your content
      </div>
   </div><!-- End Row -->
</div><!-- End Footer -->

You would style your footer class using CSS and place it in app.css and be sure it is included in your header section along with your other stylesheets.

For a better understanding of the grid system and row class, go to:

http://foundation.zurb.com/docs/components/grid.html

Hope this helps.

George Chatzidelios over 5 years ago

Hey there,

Thank you both for you replies.
Still I cannot understand how this wouldn't work.

After trying to edit this in Dreamweaver I placed a couple of closing div tags and now its working.

They weird part is I hadn't left any open div tags.
I got what I wanted just can't find the mistake.

I will look into that a bit more.

Thank you all again.

thibault milan over 5 years ago

Hi,

Into _settings.scss you can set the width of a row, gutter and number of columns :

$row-width: rem-calc(1000);
$column-gutter: rem-calc(30);
$total-columns: 12 ;

But maybe something like this css:

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

with this HTML :

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

Can help you.