What Is Responsive Design?

Responsive web design means your webpage automatically adapts to different screen sizes — phones, tablets, laptops, TVs. No zooming, no scrolling sideways, no broken layouts.

The Most Important Tag

This MUST be in every project:

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

Without this, your site will look zoomed out and broken on a phone.

Using Percent Widths

Instead of fixed pixels, use percentages so elements resize automatically.

.container {
  width: 90%;
  margin: auto;
}
      

Max-Width Instead of Width

This prevents elements from becoming too wide on big screens.

img {
  width: 100%;
  max-width: 500px;
}
      

Media Queries

Media queries let you apply CSS only when the screen meets certain conditions.

Example: Change layout on small screens

@media (max-width: 600px) {
  .box {
    width: 100%;
  }
}
      

Common Breakpoints

• 0–600px → phones
• 600–900px → tablets
• 900–1200px → laptops
• 1200px+ → desktops

Example: Two Columns → One Column

.columns {
  display: flex;
}

.left, .right {
  width: 50%;
}

/* On phones, stack them */
@media (max-width: 700px) {
  .columns {
    flex-direction: column;
  }
  .left, .right {
    width: 100%;
  }
}
      

Fluid Text

h1 {
  font-size: clamp(24px, 4vw, 48px);
}
      

This scales between 24px → 48px depending on screen size.

The “Card” Pattern

A popular responsive layout:

.card {
  background: #1e1e1e;
  padding: 20px;
  border-radius: 8px;
  width: calc(33% - 20px);
  margin: 10px;
}

@media (max-width: 800px) {
  .card { width: calc(50% - 20px); }
}

@media (max-width: 500px) {
  .card { width: 100%; }
}
      

Why Responsive Design Matters

• Most users browse on phones
• Google ranks responsive sites higher
• Better UX → more trust and engagement
• Future-proof layouts

What’s Next?

Next you’ll learn how JavaScript arrays work and how to store multiple values in a single variable.