Menu icon Foundation
Foundation 6 Full Width row

What is the correct way to create fullWidth row ?
In foundation 5 i usually created fullWidth rows like shown in code (this solution was posted on these forums).

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

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

         

In Foundation 6 documentation i found this in docs

If you need a full-width column to use as a container, put the .column and .row classes on the same element. You can still nest more grids inside this container like usual.

But this doesnt work, or actually i'm not understanding this correctly.

<div class="column row">
  Row column
</div>
            

         

Does anyone have a good solution for this ?

full widthrow

What is the correct way to create fullWidth row ?
In foundation 5 i usually created fullWidth rows like shown in code (this solution was posted on these forums).

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

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

         

In Foundation 6 documentation i found this in docs

If you need a full-width column to use as a container, put the .column and .row classes on the same element. You can still nest more grids inside this container like usual.

But this doesnt work, or actually i'm not understanding this correctly.

<div class="column row">
  Row column
</div>
            

         

Does anyone have a good solution for this ?

Brian Tan almost 4 years ago

max-width for row is capped at 75rem.

You need to override with max-width:100% or max-width:none; or use the new .expanded class.

<div class="row expanded columns">
Row Column
</div>

Nino Kutnjak almost 4 years ago

You are right, this works.

Adam Pery almost 4 years ago

Awesome!

craig bane over 3 years ago

Just curious, using sass to make my mark up as clean as possible.
I was wondering if a sass mixin exists to make a row become a full row.

*** I'm an idiot I forgot change the containing div to expanded.

Meshack Mwakalukwa about 3 years ago

Brian Tan was right and it helps me to solve my problem,

thanks a lot, while that was solution

 

<div class="row expanded columns">
Row Column
</div>

If you don't need that little padding comes with columns, then this;

<div class="row expanded">
Row Column
</div>

 Solve for me :)