Media Queries in Action - Example 2
Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Content that is only shown when conditions are met.
/* default mobile first styles */
.alert { display: none; }
@media screen and (min-width: 480px) and (orientation: landscape) {
.alert { display: block; }
}