CSSmarkup~5 mins

What is responsive design in CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Responsive design makes websites look good on all devices like phones, tablets, and computers. It changes the layout to fit the screen size.

When building a website that people will visit on phones and computers.

When you want your website to be easy to read and use on small screens.

When you want images and text to adjust automatically to different screen sizes.

When you want to avoid users zooming or scrolling sideways on mobile devices.

When you want your website to work well on both landscape and portrait modes.

Syntax

CSS

@media (max-width: 600px) {
  /* CSS rules here for small screens */
}

The @media rule lets you apply CSS only when the screen matches certain conditions.

Common conditions check screen width to change styles for phones or tablets.

Examples

This changes the background color to light blue on screens 600px wide or smaller.

CSS

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

This sets the background color to white on screens wider than 600px.

CSS

@media (min-width: 601px) {
  body {
    background-color: white;
  }
}

This makes images shrink to fit their container but keep their shape.

CSS

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

Sample Program

This example shows a simple page with two columns on wide screens. On small screens (600px or less), the columns stack vertically. The image and text resize nicely.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Responsive Design Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 1rem;
      background-color: white;
      color: black;
    }
    header {
      background-color: #4CAF50;
      color: white;
      padding: 1rem;
      text-align: center;
    }
    main {
      display: flex;
      gap: 1rem;
    }
    article {
      flex: 1;
      background-color: #f4f4f4;
      padding: 1rem;
      border-radius: 0.5rem;
    }
    img {
      max-width: 100%;
      height: auto;
      border-radius: 0.5rem;
    }
    @media (max-width: 600px) {
      main {
        flex-direction: column;
      }
      header {
        font-size: 1.2rem;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to Responsive Design</h1>
  </header>
  <main>
    <article>
      <h2>About</h2>
      <p>This layout changes when the screen is small.</p>
    </article>
    <article>
      <h2>Image</h2>
      <img src="https://via.placeholder.com/300" alt="Placeholder image" />
    </article>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Always include the <meta name="viewport"> tag for responsive design to work on phones.

Use flexible units like percentages or rem instead of fixed pixels for widths and fonts.

Test your design by resizing the browser window or using device simulation in browser DevTools.

Summary

Responsive design makes websites adapt to different screen sizes.

Use CSS @media queries to change styles based on screen width.

Flexible layouts and images help keep content readable and usable everywhere.