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!

Some mobile devices—such as the iPhone—[don't support](http://www.quirksmode.org/blog/archives/2010/04/the_orientation.html) `orientation` based media queries. Use max or min width instead. — bookcasey, Oct 21 '12 at 19:01
@bookcase Thanks for taking the time to reply! I have updated my code, but it still doesn't work. All the other code works, just not the grids. My site is just for iPads. I would appreciate any pointers. — big_smile, Oct 21 '12 at 19:31
The code sample you pasted here only shows you declaring the portrait container. You need to declare the container (or at least `set-container-width`) at each breakpoint to see any change. — Miriam Suzanne, Oct 21 '12 at 20:12
Can you put your resulting CSS in jsfiddle or codepen for us to check? — justinavery, Feb 07 '13 at 23:56

score 2 · Accepted Answer · edited May 23 '17 at 11:50

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)

SCSS & Susy: Different Layouts for Different orientations

1 Answers1