CSS MQ Examples

CSS Media Query Examples

Here are some more examples of how to use media queries to create responsive designs.

Menu

This example shows a responsive menu that stacks vertically on small screens and displays horizontally on large screens.

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}