Bootstrap hide for portrait but show for landscape

Question

Let's say I have an ul with 3 li elements. How do you hide the last two li elements when in portrait mode and show all 3 when you are in landscape mode? With CSS offcourse and Bootstrap 3. ```

``` I thought do something like: ``` .show-for-landscape{ display:block!important; } ``` But how does this work with media queries? What would be a good setting of screen size etc? Any suggestions more then welcome

Accepted Answer

You'll probably have more luck with a media query that targets the device orientation such as:

```
@media screen and (max-device-width: 1000px) and (orientation:landscape){
   /*...your special rules for landscape...*/ 
}
```

I'm not sure about the overall support in mobile browsers for the orientation property, but I know it works on all of my current iOS and my Android Galaxy Note and S4 native browsers. What I do know for sure is that this will only target mobile devices -- desktop browsers ignore it completely -- so, the max-device-width property set to 1000px will safely affect only mobile devices and have no impact when viewed on desktop.

I have also used this in a web app successfully (not Bootstrap). You'll have to test:

```
@media screen and (min-aspect-ratio: 13/9){ } // landscape and 
@media screen and (max-aspect-ratio: 13/9){ } // portrait.
```

Bootstrap hide for portrait but show for landscape

Solution

Problem