SCSS & Susy: Different Layouts for Different orientations

Question

I am creating two different layouts: One for Landscape and one for portrait. The landscape layout has wider columns. I am using the new version of Susy to do this.

This is my code:

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
$total-columns  : 7;
$column-width   : 10.900em;
$gutter-width   : 2.80em;
$grid-padding   : 4.00em;

$show-grid-backgrounds  : true;
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 0px) 
and (max-device-width : 768px) 
and (orientation : portrait) {
$total-columns  : 7;
  $column-width: 7.2em;
  $gutter-width: 2.8em;

  .container {
    @include container;
  }

}

But it doesn't work. The columns stay the same size (the smaller portrait size). How can I fix this?

Other responsive code on my page does work, it's just the grids that do not!

Susy Documentation has a whole section on Responsive Grids, but it's a bit complex to follow and doesn't discuss orientation. There's also this question that I asked before, but the solution does not work (I think its because the solution was for the old Susy version).

Thanks for any help that can be offered!

Answer 1

Susy is meant primarily to set widths of columns in percentages, which will make columns flexible to the size of the viewport or the outer container. I would use the $container-style: fluid; setting to tell Susy to use percentages for widths and margins. Since you are not changing the number of columns – you simply want the widths to change – let the widths become flexible. Then your media queries barely have to change.

Here is my basic setting for a 12 column grid.

@import "susy";
$total-columns: 12; // Evenly divisible by 2, 3, 4 and 6
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: $gutter-width;
$container-style: fluid;

I keep these settings in my _base.scss file and never change it – instead, I apply@include span-columns( X )` to whatever container I have and adjust how many columns I want it to take up at different media-query breakpoints.

Targeting iPads specifically is not very future friendly or the intention of Responsive Web Design, but I am sure you have your reasons. That comment was more for RWD newbies reading this forum.

For better device sniffing, you may need to check the User Agent string. This question also has some nice ideas: A reliable media query to detect only iPad (or at best 1024x768 mobile devices)