Media Query Orientation

In this example we demonstrate how to use the CSS3 media query for querying the orientation of the device. The menu is show vertically or horizontally according to the orientation of the device.

The CSS and HTML code to achieve this is below:

index.html.haml
li { 
  float: left;
  border: thin solid black;
  list-style-type: none;
  padding: 10px 20px;
  text-align: center;
  max-width: 100px;
}
@media all and (orientation: portrait) {
  li { float: none; }
}
index.html.haml
%body
  %ul
    %li Home
    %li Products
    %li Services
    %li Team
    %li About us
    %li Contact