Responsive Web Design with CSS: Mobile-First in Practice

Most visitors to Indian business websites arrive on phones — often over 80% of traffic. Google indexes the mobile version of your pages first. Responsive design isn’t a feature anymore; it’s the default. This guide shows how to build it properly with modern CSS.

Start with the viewport#

None of this works without <meta name="viewport" content="width=device-width, initial-scale=1">. See the viewport meta tag explained.

Mobile-first media queries#

/* Base: phones */
.cards { display: grid; gap: 16px; }

/* Tablets and up */
@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* Laptops and up */
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Writing small-screen styles first keeps CSS simpler: phones get only what they need, and larger screens add layout.

Choosing breakpoints#

Don’t design for specific devices. Resize the browser and add a breakpoint where the layout starts to look wrong. Most sites need only two or three — commonly around 600–700 px, 900–1000 px and 1200+ px.

Fluid typography and spacing with clamp()#

h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.section { padding-block: clamp(40px, 7vw, 96px); }

clamp(min, preferred, max) scales smoothly between screen sizes without breakpoints. More in CSS units explained.

Layouts that adapt by themselves#

• repeat(auto-fill, minmax(260px, 1fr)) grids — see CSS Grid guide.
• flex-wrap: wrap for button groups and tags — see Flexbox guide.
• max-width containers with side padding: width: min(100% - 32px, 1200px); margin-inline: auto;

Container queries#

Media queries respond to the screen; container queries respond to the space a component actually has. A card can switch from stacked to side-by-side when its column is wide enough, wherever it’s placed.

.card-wrap { container-type: inline-size; }
@container (min-width: 480px) {
  .card { display: grid; grid-template-columns: 160px 1fr; }
}

Responsive images and media#

img, video, iframe { max-width: 100%; height: auto; }

Then use srcset so phones download smaller files — see responsive images.

Mobile usability checklist#

• Body text at least 16 px; line length roughly 45–80 characters on larger screens.
• Tap targets ~44–48 px with spacing.
• No horizontal scroll at 320–390 px widths.
• Forms use proper input types and are easy to complete with a thumb.
• Sticky elements (headers, chat buttons, cookie bars) don’t cover content.
• Important content and links exist on mobile, not just desktop (mobile-first indexing).
• Respect safe areas on notched phones with env(safe-area-inset-bottom).

App-like mobile experiences#

This theme goes a step further on phones: a bottom tab bar, swipeable card rails, a bottom-sheet search and installable PWA support. Patterns like these make content sites feel like native apps — see progressive web apps.