Verschillende mediums en verschillende breedtes

/* mobiel */
@media screen and (min-width: 480px) {
    body {
    background-color: lightblue;
  }
}
/* tablet */
@media screen and (min-width: 481px) and (max-width:768px) {
    body {
    background-color: green;
  }
}
/* laptops en small desktops */
@media screen and (min-width: 769px) and (max-width:1279px) {
    body {
    background-color: pink;
  }
}
/* large desktops */
@media screen and (min-width: 1280px)  {
    body {
    background-color: purple;
  }
}

Bekijk het voorbeeld hier en maak dit eerst na.

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Bekijk hier een voorbeeldje.

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
of in flex taal
@media screen and (max-width: 600px) {
  .topnav a {
    flex-direction: column;
    width: 100%;
  }
}

Bepaamde elementen worden verborgen in de mobiele versie van je website:

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