Menu icon Foundation
xlarge class not working (straight CSS not Sass)

I've just started working with Foundation but can't get the xlarge class to work? I'm using the straight CSS version, not the Sass version. Any ideas what I'm doing wrong? Thanks.

<div class="row">
  <div class="medium-6 large-3 xlarge-2 columns">column 1</div>
  <div class="medium-6 large-3 xlarge-2 columns">column 2</div>
  <div class="medium-6 large-3 xlarge-2 columns">column 3</div>
  <div class="medium-6 large-3 xlarge-2 columns">column 4</div>
  <div class="medium-6 large-3 xlarge-2 columns">column 5</div>
  <div class="medium-6 large-3 xlarge-2 columns">column 6</div>
</div>
            

         

gridxlarge

I've just started working with Foundation but can't get the xlarge class to work? I'm using the straight CSS version, not the Sass version. Any ideas what I'm doing wrong? Thanks.

<div class="row">
  <div class="medium-6 large-3 xlarge-2 columns">column 1</div>
  <div class="medium-6 large-3 xlarge-2 columns">column 2</div>
  <div class="medium-6 large-3 xlarge-2 columns">column 3</div>
  <div class="medium-6 large-3 xlarge-2 columns">column 4</div>
  <div class="medium-6 large-3 xlarge-2 columns">column 5</div>
  <div class="medium-6 large-3 xlarge-2 columns">column 6</div>
</div>
            

         
Karl Ward over 5 years ago

xlarge is not applicable in the grid. By default, you have small-#, medium-#, and large-#.

You could perhaps create your own custom class for xlarge, but personally I don't see the need for this. Is your website 100% width? Most often a website is limited by a set width, and the large-# class will more than cater to this. Besides, when you get to x-large screens, there is little functional benefit in changing the columns stack.

But hey, maybe you have some specific reason to do so ... You would need to create your own class inside a media query for xlarge screens. There would be several ways to proceed, but a shortcut for your particular case would be:

.xlarge-2 {
   @media #{$xlarge-up} {
      width:50%;
   }
}

It would be a bit more code if you wanted to add all xlarge-# columns properly.

Mauricio González about 5 years ago

There's a way to activate it through SASS.

Perhaps we can get the generated css for the x-large grid from inspecting a website that uses it.

Anyway, did you solve this problem?

Im in the same situation.

Rafi Benkual about 5 years ago

There are no classes for the grid x-large. This is because there are not many people that would use these breakpoints and it would require creating a bunch of classes. You do have media queries available to control components.

In css only, you can write a media query. Example:

@media only screen and (min-width: 90.063em) {
.row-wide {
width: 1441px;
}

Best would be to use Sass. We can support in getting started. It is actually way easier than you may think.

Karl's solution will work in Sass and if you need more info on how to do this let us know.

Mauricio González about 5 years ago

Hey Rafi!

Thank you a lot!

I will dive into SASS tonight. Once my neck is not tight anymore.

Thanks again.

Ryan Brindley almost 5 years ago

In reference to the lack of people needing to diff. large and xlarge screens:

I've actually ran into several cases where I wanted different column counts for laptops and desktops.

I think that reason is enough to include xlarge columns in the framework.

Joey Riso almost 5 years ago

With all due respect, the 2014 Steam Hardware Survey (http://store.steampowered.com/hwsurvey) indicates that 71.7% of users have horizontal resolutions of 1280 and above, and 53.84% of users have horizontal resolution above 1280. Most importantly, 18.82%, nearly 1/5 of users, are above 1440, in the XLarge strata. XLarge for columns would definitely be helpful.

Right now I'm battling a problem with Foundation Button-Bar responsiveness which I will have to handle with visibility classes because I cannot use "xlarge-N columns".

I hope Foundation will include either X- and XX- in future releases, or will come up with another solution.

Rafi Benkual almost 5 years ago

Having extra breakpoints adds extra code to the framework. You can add those breakpoints as needed in your projects as needed.

Bogomil Gospodinov over 4 years ago

For xlarge-up:

without push and pull (to save traffic):

@media #{$xlarge-up} {
    @include grid-html-classes($size:xlarge);
    //may add push and pull, check _grid.scss, line 269
}

with push and pull:

@media #{$xlarge-up} {
    @include grid-html-classes($size:xlarge);
    @for $i from 0 through $total-columns - 1 {
        .push-#{$i} {
          @include grid-column($push:$i, $collapse:null, $float:false);
        }
        .pull-#{$i} {
          @include grid-column($pull:$i, $collapse:null, $float:false);
        }
      }
}

Thalys over 4 years ago

I solved this by creating a class .row.xlarge for the largest mediaqueries:

/* xlarge */
@media only screen and (min-width:90.0625em) {
.row.xlarge {
max-width: 90.0625em;
}
}

@media only screen and (min-width:90.0625em) and (max-width:120em) {
.row.xlarge {
max-width: 90.0625em;
}
}

/* xxlarge */
@media only screen and (min-width:120.0625em) {
.row.xlarge {
max-width: 120.0625em;
}
}

When you want a big row, add class xlarge to class row.