Cum să faci un site responsive?

Utilizând grile flexibile (Flexbox, Grid), media query pentru schimbarea stilurilor la diferite rezoluții ale ecranului, unități de măsură relative (%, rem, em, vw, vh) și imagini flexibile (max-width: 100%; height: auto;).

/* Media query pentru ecrane cu lățimea până la 768px */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Schimbă navigarea în verticală */
  }
}

<img src="image.jpg" alt="Imagine adaptivă" style="max-width: 100%; height: auto;">

Aplicând aceste abordări, elementele paginii se vor adapta automat la diferite dimensiuni ale ecranului dispozitivelor.