Responsive Web Design

Introduction

Responsive Web Design (RWD) ensures your website looks good on all devices, from mobile phones to large desktops. It is no longer optional; it is mandatory for user experience and SEO.

In this chapter, you will learn:

• Core concepts: Flexible layouts, images, and media queries
• Mobile-first design strategy
• Using common breakpoints
• Responsive layouts with Flexbox and Grid

Core Concepts

1. Flexible Layouts

Avoid fixed widths (px). Use relative units (%, vw, rem).

/* Bad */
.container { width: 1200px; }

/* Good */
.container { width: 100%; max-width: 1200px; }

2. Flexible Images

Prevent images from overflowing their container.

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

3. Media Queries

Apply styles based on screen width.

@media (max-width: 768px) {
  body { background-color: #f5f5f5; }
}

Common Breakpoints

Mobile-First Design

Start styling for mobile, then add styles for larger screens using min-width.

/* Base styles (Mobile) */
.card { padding: 15px; }

/* Tablet and up */
@media (min-width: 768px) {
  .card { padding: 30px; }
}

Responsive Layouts

Using Flexbox

.container {
  display: flex;
  flex-wrap: wrap;
}
.item { width: 100%; }

@media (min-width: 768px) {
  .item { width: 50%; }
}

Responsive Navigation

.nav { display: none; } /* Hidden/Hamburger on mobile */
@media (min-width: 768px) {
  .nav { display: flex; } /* Visible on desktop */
}

Common Beginner Mistakes & Best Practices