Responsive Design

Responsive design ensures your website looks and works well on every device — from desktop monitors to tablets to mobile phones. It's no longer optional; it's the standard way of building for the web.

The Viewport Meta Tag

Without this tag, mobile browsers will try to render the page at a desktop width and zoom out, breaking your responsive layout.

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

Responsive Grid View

Build a fluid grid that adapts to the screen width.

.row {
  display: flex;
  flex-wrap: wrap;
}

[class*="col-"] {
  width: 100%;
  padding: 8px;
}

@media (min-width: 768px) {
  .col-1 { width: 8.33%; }
  .col-2 { width: 16.66%; }
  .col-3 { width: 25%; }
  .col-4 { width: 33.33%; }
  .col-6 { width: 50%; }
  .col-8 { width: 66.66%; }
  .col-12 { width: 100%; }
}

Media Queries

Media queries apply CSS only when certain conditions are true (like screen width, orientation, or resolution).

/* Mobile-first approach: base styles are for mobile */
.container { padding: 8px; }

/* Tablet */
@media (min-width: 768px) {
  .container { padding: 16px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 960px; margin: 0 auto; }
}

/* Large screens */
@media (min-width: 1440px) {
  .container { max-width: 1200px; }
}

/* Common breakpoints */
@media (max-width: 600px)  { /* phones */ }
@media (min-width: 601px) and (max-width: 1024px) { /* tablets */ }
@media (min-width: 1025px) { /* desktops */ }

/* Orientation */
@media (orientation: landscape) { /* landscape styles */ }
@media (orientation: portrait)  { /* portrait styles */ }

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  body { background: #0f172a; color: #e2e8f0; }
}

Responsive Images

Max-Width Approach

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

Picture Element

<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

Responsive Videos

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

CSS Frameworks

Bootstrap

Bootstrap provides a 12-column grid system, utility classes, and pre-built components. You can use it via CDN without installing anything.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row">
    <div class="col-md-8">Main content</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

Tailwind CSS

Tailwind is a utility-first framework that lets you compose designs directly in your HTML using small utility classes.

<div class="flex justify-between items-center p-4 bg-blue-500 text-white rounded-lg">
  <h1 class="text-2xl font-bold">Hello</h1>
  <button class="bg-white text-blue-500 px-4 py-2 rounded">Click</button>
</div>

Responsive Design Templates

A common responsive pattern uses a flexible container, fluid images, and media queries at breakpoints of 600px, 768px, 1024px, and 1440px. Always design mobile-first — start with the narrowest layout and add complexity as the viewport grows.