The Guide To Responsive Design

Using modern CSS

The typography is responsive to the viewport width via clamp() function. The spacing is responsive to the viewport width via clamp() function. The hero section is responsive to its content via flexbox wrapping. The cards grid is responsive to the available space with minmax(), no media queries. The card component is responsive to its wrapper via size container queries and style container queries. The margins and paddings are responsive to the websites language via logical properties.

Using media queries

The site navigation is responsive to the viewport width. The theming is responsive to the user preferences in their operating system. The card hover effect is responsive to what the user is using (touch vs mouse).

We will only need one max-width to avoid having a
very large container on wide screens.

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

We needed a way to add a limit otherwise a font
size can blow up to be huge on large screens.

h2 {
  font-size: calc(1rem + 5vw);
}

/* If the viewport width is 2000px or more, limit
* the font size to 4rem.
*/
@media (min-width: 2000px) {
  font-size: 4rem;
}

h2 {
  font-size: clamp(1rem, 0.5rem + 2.5vw, 3rem);
}

Dynamic gap

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1rem, 2vw, 24px);
}

For a hero section, we might need to change the
vertical padding based on the viewport size. CSS
clamp() with viewport units is perfect for that.

.hero {
  padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

User preferences media queries

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  /* dark mode styles */
}

Container Queries