CSS MQ Examples

CSS MQ examples are as follows:

CSS MQ Examples-responsive

A responsive navigation menu:

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

Media queries for column:

@media screen and (max-width: 1000px) {
  .column {
    width: 60%;
  }
}

@media screen and (max-width: 500px) {
  .column {
    width: 150%;
  }

Mediq query can hide elements on different screens:

@media screen and (max-width: 500px) {
  div.example {
    display: none;
  }

Media query can change layout of a page also:

@media only screen and (orientation: landscape) {
  body {
    background-color: yellow;
  }

Media query can also change the font size:

@media screen and (max-width: 500px) {
  div.example {
    font-size: 40px;
  }