HTML/CSS :Media Queries

A placer tout en bas de la feuille de style
Utiliser @media

exemple:

deux containers qui s’affichent mal sur un téléphone. On change conditionnellement leurs caractéristiques en cas d’affichage sur un écran plus petit.

.contact-container {
  display: flex;
  flex-direction: row;
  max-width: 1200px;
}

.contact {
  width: 50%;
  padding: 50px;
}

/* Media Query */
@media screen and (max-width: 520px) {
  .contact-container {
    flex-direction: column;
  }
  .contact {
    width: initial;
    padding: 15px;
  }
}

Ici:
media screen: indique en cas d’affichage sur un écran
and( ) conditions pour lesquelles les conditions changent.
520px: choisi arbitrairement en fonction de la taille moyenne des smartphone/tablettes, etc.