back to listing index

zurb foundation is it possible to have full row width

[web search]
Original source (stackoverflow.com)
Tags: css zurb-foundation css-expand-div-to-fill-entire-horizontal-width-100vw
Clipped on: 2016-04-30

I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as

class="row navigation"
class="row footer"

I tried looking for how to fix this but I'm out of options. I'm assuming it is a small fix in the foundation.css file but it's a bit too overwhelming at the moment as I'm new to it.

Any poiinters much appreciated.

asked Aug 1 '12 at 1:27
Image (Asset 2/21) alt=
Chou One
1941519

protected by Community Apr 23 '14 at 16:20

This question is protected to prevent "thanks!", "me too!", or spam answers by new users. To answer it, you must have earned at least 10 reputation on this site.

   upvote
  flag
figured it out somehow.thanks – Chou One Aug 1 '12 at 6:32
up vote -35 down vote accepted

My first post!

I just stumbled onto Foundation myself, today. I think this will work...

.navigation, .footer { width: 100% !important; }

Strangely enough, I had a similar question to yours. I want to make a row take up the entire height of the page for a fullscreen JS app.

answered Aug 1 '12 at 6:00
Image (Asset 4/21) alt=
Ascorbyl
591
   upvote
  flag
well after long I figured it out somehow and your method also works but the alignment gets a bit messed up. I think the best way is to wrap the rows inside another div and apply the background color to that! Regarding your query, i think the row height would be determined by the amount of content inside that row. You can try wrapping it inside a div. lemme know how it goes! – Chou One Aug 1 '12 at 6:13
   upvote
  flag
No luck. Might just resort to making my own CSS for that page then :P – Ascorbyl Aug 1 '12 at 6:39
1 upvote
  flag
I would go with what @Stacey Schlenker suggested. Use the full-width css class that foundation has provided. – Paul Parker Aug 16 '13 at 18:32
9 upvote
  flag
This is the most down-voted but accepted answer that I have ever seen. Incredible! – nbro Jul 31 '15 at 16:15
1 upvote
  flag
Avoid important if you can. It makes stuff a mess. – codenamejames Oct 6 '15 at 18:40

I ran into the same problem yesterday. The trick is, for full width spanning blocks, you just keep them out of the row/column structure, since row/column will always apply the default padding. Keep your footers and headers on their own, and use row/column inside them.

<header>
    This will span the full width of the page
</header>
<div class="row">
    <div class="twelve columns">
        This text will flow within all typical padding and margins
    </div>
</div>
<footer>
    This will span the full width of the page
    <div class="row">
        <div class="twelve columns">
            This text will flow within all typical padding and margins
        </div>
    </div>
</footer>
answered Oct 19 '12 at 15:57
Image (Asset 5/21) alt=
ngl817
76259
1 upvote
  flag
Just put your code outside div class="row", thks! – Michał Korzeniowski Aug 10 '13 at 18:01
   upvote
  flag
Perfect, thanks for the answer – sgtbeano Jan 25 '14 at 10:18
   upvote
  flag
I think love you. – Danny Andrews Jan 8 '15 at 16:28
   upvote
  flag
I agree with this answer, but you can use any div to wrap. It doesn't have to be an html5 element such as footer. It just has to be completely outside of any nested grid structure. Often you will need to add margin and padding to make it "fit" visually with other elements on the page. I also created a code pen to illustrate the above concept. – JAMESSTONEco May 18 '15 at 2:33

What I have been doing is to add a custom class so that I can chain it with .row and override the max-width setting.

<div class="row full-width"></div>

.row.full-width {
  width: 100%;
  max-width: 100%; 
}

I put width in here too to cover bases, but it is already declared in foundation.css so you can just omit it.

answered Mar 13 '13 at 15:38
Image (Asset 7/21) alt=
1 upvote
  flag
This is the method I use. I think its the simplest, and goes along with Foundation's semantic philosophy. – Logic Artist Jun 24 '13 at 16:31
   upvote
  flag
This is also the route I took. If its a full width header or footer, I would just place the row inside the header/footer. If a full width row is a common occurrence though this is the best route to take. – alexbooots Aug 23 '13 at 18:42
   upvote
  flag
Better answer for the expected behaviour – iwalktheline Aug 19 '15 at 19:41

If you're using Zurb Foundation Framework, simply remove the row class and wrap the element in a class container that is 100% width. Now you probably want to center the stuff, use class centered like this:

<div class="container navigation">
    <div class="centered">
        Some navigation stuff
    </div>
</div>
answered Sep 5 '12 at 0:09
Image (Asset 9/21) alt=
cosmicdot
19613
   upvote
  flag
and what does class .centered ? you should add some more to your answer – Mark Sep 25 '12 at 7:19
   upvote
  flag
.centered is built into Zurb foundation - there is a section in the documentation devoted to this, foundation.zurb.com/docs/grid.php There are a lot of quick positioning elements that are extremely useful. – cosmicdot Nov 20 '12 at 17:19

I completely disagree with the answer. You shouldn't have to use !important

Please refer to my article and demo at http://edcharbeneau.github.com/FoundationSinglePageRWD/

You should be able to get what you need from there. The demo is for 2.2 but is very similar in function to v3.

answered Aug 1 '12 at 13:33
Image (Asset 10/21) alt=
Ed Charbeneau
3,0661118

Use "Section" as in:

<section>
  <div class="row">
   <div class="small-12 columns">
   </div>
  </div>
</section>

Then, assign an ID to the section and use that for your background.

answered Jun 10 '13 at 21:05
Image (Asset 11/21) alt=
Troy
3956719
   upvote
  flag
worked perfectly ::) – chrishough Jan 12 '14 at 1:26

I know that there are already many answers, but I think I have something new to add in this topic if someone is using Foundation 5 and stumbled upon this question (like me).

As Foundation is using REM units, it would be best to alter .row class using them and by adding extra class, so you can have only selected rows full-width. For example by using .full class:

.row.full {
    max-width: 80rem;  /* about 90rem should give you almost full screen width */
}

You can see that it is used like this even in documentation page of Zurb Foundation (they altered .row class, though): http://foundation.zurb.com/docs/ (just look into page source code)

answered Jul 6 '14 at 10:59
Image (Asset 12/21) alt=
wasil
31518

This is in regards to Foundation 5. None of the answers given so far, provide edge-to-edge, full widths. That's because inner .columns add padding.

For a true edge-to-edge, full width content, add this to your CSS.

.row.full { width: 100%; max-width: 100%; }
.row.full>.column:first-child,
.row.full>.columns:first-child { padding-left: 0; }
.row.full>.column:last-child,
.row.full>.columns:last-child { padding-right: 0; }

Simply add .full class to a .row you wish to extend full width.

<div class="row full">
  <div class="medium-6 column">This column touches Left edge.</div>
  <div class="medium-6 column">This column touches Right edge.</div>
</div>
answered Dec 10 '14 at 11:38
Image (Asset 13/21) alt=
timofey
1,61411520

Just override the max-width property as max-width: initial;, for example,

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

<div class="row fullWidth"> </div>

this works for me :)

answered Apr 15 '14 at 8:52
Image (Asset 14/21) alt=
Able Alias
2,01643459

You really would want to keep the row class otherwise you lose a lot of the power of the grid system. Why not change the setting for $rowWidth from 1000 (default) to 100%. This can be found in the file foundation_and_overrides.scss

answered Feb 12 '13 at 13:25
Image (Asset 15/21) alt=
stephen
111
answered Sep 3 '14 at 11:05
Image (Asset 16/21) alt=
Philip
1,56943469

If you're using sass, this is a better way:

 <div class="row full-width"></div>

.row{
    &.full-width{ 
        width: 100%; 
        max-width: 100%!important; //might be needded depending on your settings
        &>.column:first-child,
        &>.columns:first-child{ 
            padding-left: 0; 
        }
        &>.column:last-child,
        &>.columns:last-child{ 
            padding-right: 0; 
        }
    }
}
answered Jun 18 '15 at 10:23
Image (Asset 17/21) alt=
Claudiu Creanga
2,17472147

If you don't give it the "row" class and put columns inside it works on a 100% width

answered Feb 4 '13 at 23:28
Image (Asset 18/21) alt=

I am not sure if I am missing something, but I had to add a .row div for the .centered to work. I can still style the .header to have a full width background in this case, but the .container method did not work for me.

<header class="header">
  <div class="row">
    <div class="centered">
       Logo and stuff
    </div>
  </div>

  <div class="row">
    Some navigation stuff   
  </div>
</header>
answered Jan 1 '13 at 23:12
Image (Asset 20/21) alt=
Jordan
6351811

yes, just use like this:

  <div class="large-12 columns">

    <h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2>

  </div>

answered Nov 6 '13 at 9:01
Image (Asset 21/21) alt=
Chris
1616
   upvote
  flag
this doesnt work – 32423hjh32423 Jan 12 '14 at 17:47

Your Answer

asked

3 years ago

viewed

60480 times

active

10 months ago

Hot Network Questions

Technology Life / Arts Culture / Recreation Science Other
  1. Stack Overflow
  2. Server Fault
  3. Super User
  4. Web Applications
  5. Ask Ubuntu
  6. Webmasters
  7. Game Development
  8. TeX - LaTeX
  1. Programmers
  2. Unix & Linux
  3. Ask Different (Apple)
  4. WordPress Development
  5. Geographic Information Systems
  6. Electrical Engineering
  7. Android Enthusiasts
  8. Information Security
  1. Database Administrators
  2. Drupal Answers
  3. SharePoint
  4. User Experience
  5. Mathematica
  6. Salesforce
  7. ExpressionEngine® Answers
  8. more (13)
  1. Photography
  2. Science Fiction & Fantasy
  3. Graphic Design
  4. Movies & TV
  5. Seasoned Advice (cooking)
  6. Home Improvement
  7. Personal Finance & Money
  8. Academia
  9. more (9)
  1. English Language & Usage
  2. Skeptics
  3. Mi Yodeya (Judaism)
  4. Travel
  5. Christianity
  6. Arqade (gaming)
  7. Bicycles
  8. Role-playing Games
  9. more (21)
  1. Mathematics
  2. Cross Validated (stats)
  3. Theoretical Computer Science
  4. Physics
  5. MathOverflow
  6. Chemistry
  7. Biology
  8. more (5)
  1. Stack Apps
  2. Meta Stack Exchange
  3. Area 51
  4. Stack Overflow Careers
site design / logo © 2016 Stack Exchange Inc; user contributions licensed under cc by-sa 3.0 with attribution required
rev 2016.4.29.3525