Media Queries

Examine the .css source code, note the @media queries to see how the height and orientation queries are functioning. Be sure to alter the aspect ratio of your browser to trigger the different example media queries.

Implement the same functionality testing for various widths:

Width detection...

Viewport has 1600px or greater width available

Viewport is 1024-1599px wide

Viewport is 500-1023px wide

Viewport is less than 500px wide

Is the browser tall or short?

Tall - viewport is taller than 499pxShort - viewport is shorter than 500px

Landscape or Portrait?

You are in Landscape mode (viewport is wider than it is tall) You are in Portrait mode (viewport is taller than it is wide)