Over 70% of Indian web traffic is mobile. Responsive is not optional — but modern CSS makes it far easier than the media-query spaghetti of 2015.
1. Mobile-first always
/* base = mobile */
.container { padding: 16px; }
/* enhance upward */
@media (min-width: 768px) { .container { padding: 32px; } }
@media (min-width: 1024px) { .container { max-width: 1140px; margin-inline: auto; } }2. Layouts that respond without queries
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.title { font-size: clamp(1.5rem, 4vw, 2.5rem); } /* fluid type */
img { max-width: 100%; height: auto; }3. Container queries for components
.card-slot { container-type: inline-size; }
@container (min-width: 400px) { .card { flex-direction: row; } }Components respond to their slot, not the screen — the 2026 way to build reusable UI.
Test at three widths
375px (phone), 768px (tablet), 1280px (desktop). DevTools device toolbar covers all three. Full lesson: Responsive Design.
← All Articles