CSS @media Queries With Orientation Example

Like the title says. For your reference, an example set of media queries conforming to Bootstrap 3’s width breakpoints.

Here is the example. EXAMPLE CODE HERE. Check the code, and play with the width and height of your viewport to see where the queries reach.

Notes On The Example

This example is mobile first like your own code ought to be. Note that I did not bother using ‘orientation: portrait’, this was because it only works in the order portrait followed by landscape. If you put portrait after landscape it does not get picked up in any of the browsers I tested.
*N.B. W3schools are dopes. They only give one very basic css media query example -and it’s done incorrectly! See the thicks in action.

Do not give out to me about where my styles are kept, as I do not care what you think. However, if you wish to praise me as a hero, go ahead =)

Leave a Reply