Menu icon Foundation
Full Width Row

Hey guys,

I’m just curious what you think the best practice is when I have a row that I need to be full width of the page. Because if I set a row to be the full width, then my interior subsequent row will be full width and not adopt the Foundation defaults.

I’m trying to keep this short in hopes that you might have a quick answer or thought. I swear I’ve been searching all over and I have yet to find a solid answer - which may mean my searching abilities suck. Not sure. But my goal is to not “hack” too much and lose some intended functionality.

Foundation 4Rows

Hey guys,

I’m just curious what you think the best practice is when I have a row that I need to be full width of the page. Because if I set a row to be the full width, then my interior subsequent row will be full width and not adopt the Foundation defaults.

I’m trying to keep this short in hopes that you might have a quick answer or thought. I swear I’ve been searching all over and I have yet to find a solid answer - which may mean my searching abilities suck. Not sure. But my goal is to not “hack” too much and lose some intended functionality.


AlexLasek gave the most helpful answer for this post
AlexLasek about 6 years ago

I actually prefer to add a class to row to make it full width like that:

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

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

cheers

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

Rafi Benkual about 6 years ago

Good question. You can elect to not use a wrapper if you want to span the full screen width. You can create a
HTML
<div class="row">

right after that if you want. From there you can target that div in the css if you plan to reduce the margin between.

I hope this helps!

Matt Kelly about 6 years ago

Alok, try wrapping your row in a regular old div and apply the full width styles you need to that div. You can then embed your row in the div.

<div>
  <div class="row">
    <div class="twelve columns">
    </div>
  </div>
</div>

AlexLasek about 6 years ago

I actually prefer to add a class to row to make it full width like that:

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

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

cheers