CSS Advanced

CSS Responsive Design

Build layouts that work on all devices using media queries, fluid typography, and modern CSS techniques.

Responsive Web Design

Responsive web design means that your website will look good on all devices (desktops, tablets, and phones).

Media Queries

Media queries apply CSS when certain conditions are true, like screen width. The mobile-first approach means you style for mobile first, then add overrides for larger screens.

Breakpoints

Common breakpoints:

sm: 640px (small devices)
md: 768px (tablets)
lg: 1024px (desktops)
xl: 1280px (large desktops)

Fluid Typography

Use clamp() to create text that scales smoothly between sizes.

font-size: clamp(min, preferred, max)

The Viewport Meta Tag

Always include this in your HTML <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Example

css

/* Mobile-first approach */
.container {
  padding: 16px;
  width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 32px;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1400px;
    padding: 0 48px;
  }
}

/* Fluid typography with clamp */
h1 {
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.2;
}

body {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
}

/* Responsive grid (no media queries) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Hide/show at breakpoints */
.mobile-only {
  display: block;
}
@media (min-width: 768px) {
  .mobile-only { display: none; }
  .desktop-only { display: block; }
}

Try it yourself — CSS