Responsive

You,Sat Jul 24 2021•web development layout css design

Media queries

Pixels are no longer exact values in modern devices, @media (min-width: 551px) coupled with @media (max-width: 550px) might create bugs at 550.5px resolutions.
We can use @media (min-width: 550.01px) to work our way around this issue.

Clamp values

Clamp values set min/ideal/max values, for example with width for a card:

.card {
  width: clamp(500px, 65%, 800px);
  max-width: 100%;
}

This card takes at least 500px if the content is very short. It tries to have a width of 65%, but on very large screens stops at 800px. On very small screens it falls back to 100% width.

Hide/Show

Use display: none with media queries to remove from the DOM.
This is a better choice for React SSR (ex: Next.js), compared to JS alternatives, to get the right version on first render and not wait for hydration.

.desktop-only {
  display: none;
}
@media (min-width: 1024px) {
  .desktop-only {
    display: block;
  }
  .desktop-only {
    display: none;
  }
}