Menu icon Foundation
unlimited row width vs max row width on same page

In _settings for Sass I set $row-width: rem-calc(1200); This is working providing the maximum width I intend for all standard row divs: See code.

However, sometimes I need a row on the same page that can be unlimited to the horizontal size of the browser, e.g. up to 2500px. I have not been able to get anything bigger than "$row-width: rem-calc(1200); " even when adding my own css: See code.

How can I have different rows on the same page whereby some are governed by the Sass _Settings and others are overridden in the div tag?

 <div class="row">
    <div class="small-12 columns">
	    <p>content ...</p>
	</div>
</div>

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

<div class="row fullWidth">
    <div class="small-12 columns">
	    <p>content ...</p>
	</div>
</div>


         

Row width

In _settings for Sass I set $row-width: rem-calc(1200); This is working providing the maximum width I intend for all standard row divs: See code.

However, sometimes I need a row on the same page that can be unlimited to the horizontal size of the browser, e.g. up to 2500px. I have not been able to get anything bigger than "$row-width: rem-calc(1200); " even when adding my own css: See code.

How can I have different rows on the same page whereby some are governed by the Sass _Settings and others are overridden in the div tag?

 <div class="row">
    <div class="small-12 columns">
	    <p>content ...</p>
	</div>
</div>

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

<div class="row fullWidth">
    <div class="small-12 columns">
	    <p>content ...</p>
	</div>
</div>


         

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

Rafi Benkual over 4 years ago

This works for me:

.fullWidth {
  max-width: 100%;
}

The SCSS variable is meant to be a default so it will affect all rows.

Jay Todtenbier over 4 years ago

Thank you Rafi. That did the trick.