Menu icon Foundation
Switch lay-out based on orientation

Hi,

I am working on a sort of full-screen web-app, primairily aimed at iPhone and iPad.
There are 2 basic lay-outs:
- 2 blocks on top of eachother (portrait layout)
- 2 blocks next to eachother (landscape layout)

I use a "small-12 medium-8" and a "small-12 medium-4" setup to achieve this.
This does make the switch based on size, but it only looks good on portrait iPhone and landscape iPad.

What I want to achieve is that the portrait-layout triggers on portrait screens. And the landscape lay-out on landscape screens.

Is this possible?
I know the orientation can be detected, but I can't make this switch based on that I think?

Regards,

- Ruben

mobileipadiphonetabletorientationvisibility

Hi,

I am working on a sort of full-screen web-app, primairily aimed at iPhone and iPad.
There are 2 basic lay-outs:
- 2 blocks on top of eachother (portrait layout)
- 2 blocks next to eachother (landscape layout)

I use a "small-12 medium-8" and a "small-12 medium-4" setup to achieve this.
This does make the switch based on size, but it only looks good on portrait iPhone and landscape iPad.

What I want to achieve is that the portrait-layout triggers on portrait screens. And the landscape lay-out on landscape screens.

Is this possible?
I know the orientation can be detected, but I can't make this switch based on that I think?

Regards,

- Ruben

Caleb Winters almost 6 years ago

We don't have semantic grid classes for screen orientation, but we do have media queries for orientation.

Also, using mixins, you can write custom breakpoints for the grid.

.class-name { 
  @media #{$small-only} and (orientation: portrait) { 
    @include grid-column(2);
  }
  @media #{$small-only} and (orientation: landscape) { 
    @include grid-column(4);
  }
 @media #{$medium-up} and (orientation: landscape) { 
    @include grid-column(6);
  } 
}

Hope this helps.

Brian Hughes over 5 years ago

I know this is a really old post, but I can't seem to get it to work. Looks like when I add that particular query it also changes my desktop view. I wonder if there's a work-around for this little bit of stuff?

Ruben Schulz almost 6 years ago

Since I'm not using SASS, I had to figure out something else.
I am not using the column classes for those two divs anymore, I made up my own classes based on the foundation code to switch based on orientation.

Order section goes on top on portrait, and on the right on landscape.
Input section goed on bottom on portrait, and on the left on landscape.

@media only screen and (orientation:landscape) {
  .order-section {
    float:    right;  
    width:    33.33333%; 

    left:    66.66667%;
    right:    auto; 
  }

  .input-section {
    float:    left;
    width:    66.66667%;   

    right:    33.33333%;
    left:    auto; 
  }
}

@media only screen and (orientation:portrait) {
  .order-section,
  .input-section {
    float:    none;
    width:    100%;  
  }
}

Thanks for pointing me in the right direction! :-)
Hope this helps somebody.

Ruben Schulz almost 6 years ago

Thanks for your reply!
I'm going to have a look, I'll let you know if it works :-)