Menu icon Foundation
Portrait and Landscape Media Queries - Dumbed Down

Hello,

I am new to using Foundation and I'm not a developer - I'm a tech writer and need to use Foundation when creating online documentation (using MadCap Flare).

I understand the grid layout and can create responsive designs for small, medium, and large, but I can't get my head around how you control portrait and landscape layouts. In particular, how I can set the medium layout to be different depending on whether it is landscape or portrait. Could someone explain it in super-dumbed-down terms? I've looked at the documentation and it doesn't provide enough context or explanation for me. 

 

Thanks

 

media queriesportraitLandscape

Hello,

I am new to using Foundation and I'm not a developer - I'm a tech writer and need to use Foundation when creating online documentation (using MadCap Flare).

I understand the grid layout and can create responsive designs for small, medium, and large, but I can't get my head around how you control portrait and landscape layouts. In particular, how I can set the medium layout to be different depending on whether it is landscape or portrait. Could someone explain it in super-dumbed-down terms? I've looked at the documentation and it doesn't provide enough context or explanation for me. 

 

Thanks

 

Rafi Benkual over 3 years ago

Hi Craig,

You may get a more targeted solution if you share the design challenge you're trying to solve with the media queries.

In terms of controlling layout, the small, medium, and large breakpoints cover most scenarios. You can change the breakpoint widths themselves if you'd like.

Using the landscape and portrait media queries is not a grid width so it is not part of the grid. Instead it relies on the device to report this orientation accurately. Here is a typical use case:

 

.card-image {
  img {
    width: 3rem;
    
    @include breakpoint(landscape) {
      width: 6rem;
    }
  }
}

or CSS

@media only screen and (orientation: portrait) {
  // some styles
}

So can target any CSS in these breakpoint including overriding grid classes.