Menu icon Foundation
remove expand class on xlarge

Hello i know it sounds weird, but i'm trying to figure how to remove the expand class on xlarge screens via CSS.

I have the following "<div class="expanded row">"  but on very large screens my rows are way to big and i want to box them in the regular row width... 

Is there some mixin to create or should i remove the class in javascript ? 

Thanks for your help

 

 

expanded row remove large screen

Hello i know it sounds weird, but i'm trying to figure how to remove the expand class on xlarge screens via CSS.

I have the following "<div class="expanded row">"  but on very large screens my rows are way to big and i want to box them in the regular row width... 

Is there some mixin to create or should i remove the class in javascript ? 

Thanks for your help

 

 

Rafi Benkual almost 3 years ago

Hi Oliver,

This brings up an interesting use case. You have a fluid width site, but on a very large screen you'd like to contrain it to a max width.

I would use a custom wrapper for this use case to contrain the content to a max-wdith.

.page-content {
  max-width: 1600px;
}

 

Otherwise using a class to do this is extra code that many people would not use. Something like:

<div class="row expanded xlarge-unexpanded">
  <div class="medium-2 columns">2 columns</div>
  <div class="medium-10 columns">10 columns</div>
</div>