arcbyte/CSS
LibraryCSSResponsive Design

Responsive Design

Make layouts adapt with fluid sizing, media queries, and container queries.

Updated Tested with Modern CSS

Responsive design adapts to available space, user settings, and input methods. A resilient page starts flexible and adds breakpoints where its content needs them.

Build a fluid foundation

layout.css
.shell {
  width: min(72rem, 100% - 2rem);
  margin-inline: auto;
}
img { max-width: 100%; height: auto; }

Use percentages, flexible tracks, min(), max(), and clamp() before reaching for media queries.

Add content-driven breakpoints

layout.css
.lesson-layout { display: grid; gap: 2rem; }

@media (min-width: 60rem) {
  .lesson-layout { grid-template-columns: 16rem minmax(0, 1fr); }
}

Choose the breakpoint where the layout becomes uncomfortable, not from a list of device models.

Respond to the container

card.css
.card-shell { container-type: inline-size; }
.card { display: grid; gap: 1rem; }

@container (min-width: 32rem) {
  .card { grid-template-columns: 10rem 1fr; }
}

Container queries let a reusable component adapt to the space its parent gives it, wherever it appears.

Respect user preferences

preferences.css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; transition-duration: 0.01ms; }
}

Keep this

Start fluid, add content-driven queries, let components respond to their containers, and honor user preferences.

Your place is saved on this device.