Introduction to responsive design and media queries

Responsive design helps web pages work on many screen sizes.

People may visit the same page on a phone, tablet, laptop, or large monitor. Your layout should adapt so the page stays readable and easy to use.

Why responsive design matters

A fixed-width layout may look fine on a laptop but break on a phone.

For example, a 1200px wide page can overflow a small screen and force the user to scroll sideways.

Responsive design helps avoid that problem.

Good responsive pages usually have:

• readable text
• buttons that are easy to tap
• layouts that fit the screen
• images that do not overflow their containers

What responsive design means

Responsive design means writing CSS that adjusts to different screen sizes.

The page does not need a completely different version for every device. Instead, the same HTML can change its layout as the available space changes.

A simple responsive layout might:

• show cards in one column on phones
• show two columns on tablets
• show three columns on desktops

What a media query is

A media query is a CSS rule that applies styles only when a condition is true.

Here is the basic syntax:

In plain English, this means:

If the screen is at least 768px wide, set .card to width: 50%.

If the screen is narrower than 768px, the browser ignores the styles inside that media query.

Mobile-first design

Mobile-first means writing the small-screen styles first.

These default styles do not need a media query.

Then you add min-width media queries for wider screens.

In this example, cards stack by default. At 768px and wider, they become two columns.

Breakpoints

A breakpoint is a screen width where the layout changes.

Common starting points are:

• phones: default styles
• tablets: around 768px
• desktops: around 1024px

These numbers are not strict rules.

Add a breakpoint when your layout needs it. If the page starts to feel squeezed, stretched, or hard to read, that is a good sign that a breakpoint may help.

Using min-width

The min-width condition means “from this width and larger.”

This rule applies only when the screen is 1024px wide or wider.

min-width works well for mobile-first CSS because you start simple and add more layout only when there is enough space.

Using max-width

The max-width condition means “up to this width.”

This rule applies only when the screen is 500px wide or narrower.

max-width is useful sometimes, but beginners usually find min-width easier for mobile-first layouts.

Responsive layout example

This example shows the same HTML and CSS inside two simulated screen widths.

The first frame is narrow like a phone. The second frame is wider like a small tablet or larger screen.

The demo uses smaller breakpoints than a real full-page layout so the changes are visible inside the lesson preview area.

<div class="screen-demo">
  <div class="screen-panel">
    <p>Mobile width: 320px</p>
    <iframe
      title="Mobile layout preview"
      class="phone-frame"
      srcdoc="<style>
        body {
          margin: 0;
          font-family: Arial, sans-serif;
        }

        .features {
          display: grid;
          gap: 16px;
          padding: 12px;
        }

        .card {
          padding: 24px;
          text-align: center;
          background-color: #dbeafe;
          border: 1px solid #2563eb;
        }

        @media (min-width: 400px) {
          .features {
            grid-template-columns: 1fr 1fr;
          }
        }

      </style>

      <div class='features'>
        <div class='card'>Feature 1</div>
        <div class='card'>Feature 2</div>
      </div>"
    ></iframe>
  </div>

  <div class="screen-panel">
    <p>Tablet width: 480px</p>
    <iframe
      title="Tablet layout preview"
      class="tablet-frame"
      srcdoc="<style>
        body {
          margin: 0;
          font-family: Arial, sans-serif;
        }

        .features {
          display: grid;
          gap: 16px;
          padding: 12px;
        }

        .card {
          padding: 24px;
          text-align: center;
          background-color: #dbeafe;
          border: 1px solid #2563eb;
        }

        @media (min-width: 400px) {
          .features {
            grid-template-columns: 1fr 1fr;
          }
        }

      </style>

      <div class='features'>
        <div class='card'>Feature 1</div>
        <div class='card'>Feature 2</div>
      </div>"
    ></iframe>
  </div>
</div>

<style>
  .screen-demo {
    display: grid;
    gap: 16px;
    font-family: Arial, sans-serif;
  }

  .screen-panel {
    overflow-x: auto;
  }

  .screen-panel p {
    margin: 0 0 8px;
    font-weight: bold;
  }

  iframe {
    height: 180px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: white;
  }

  .phone-frame {
    width: 320px;
  }

  .tablet-frame {
    width: 480px;
  }
</style>

In the 320px frame, the cards stack in one column because no media query matches yet.

In the 480px frame, the min-width: 400px query matches, so the cards switch to two columns.

Making images responsive

Large images can overflow narrow containers.

This small rule helps images fit their parent container:

max-width: 100% prevents the image from becoming wider than its container.

height: auto keeps the image proportions correct as it scales down.

Common beginner mistakes

• Using fixed pixel widths for the whole page: a 1200px container can overflow on phones. Use flexible widths or max-width for large containers.
• Writing desktop styles first: it is often harder to undo a complex desktop layout for mobile than to start simple and add larger layouts later.
• Adding too many breakpoints: do not write a media query for every device. Add a breakpoint when the layout actually needs one.
• Forgetting to test narrow screens: shrink the browser window and check that text, buttons, and layout still fit.

Mini practice task

Write a min-width media query that changes .menu from one column to two columns at 768px.

Use:

Short quiz with answers

1. What does responsive design help with?
2. What does min-width: 768px mean?
3. Why is max-width: 100% useful for images?

Answers:

1. It helps pages stay readable and usable on different screen sizes.
2. The styles apply when the screen is 768px wide or wider.
3. It prevents images from overflowing their parent containers.

Mini practice task answer:

Small challenge

Try creating a responsive product grid.

1. Make .product-grid a grid.
2. Add a 16px gap.
3. Keep one column by default.
4. At 400px, change it to two columns.
5. At 600px, change it to three columns.

<div class="product-grid">
  <div class="item">Product A</div>
  <div class="item">Product B</div>
  <div class="item">Product C</div>
  <div class="item">Product D</div>
  <div class="item">Product E</div>
  <div class="item">Product F</div>
</div>

<style>
  .item {
    padding: 30px;
    text-align: center;
    font-family: Arial, sans-serif;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
  }

  .product-grid {
    /* 1. Make this a grid */

    /* 2. Add a 16px gap */

    /* 3. One column is the default, so no column rule is needed */
  }

  /* 4. At 400px, use two columns */
  @media (min-width: 400px) {
    .product-grid {
    }
  }

  /* 5. At 600px, use three columns */
  @media (min-width: 600px) {
    .product-grid {
    }
  }
</style>

One possible answer:

Summary

• Responsive design helps pages adapt to different screen sizes.
• Media queries apply CSS only when a condition is true.
• Mobile-first CSS starts with small-screen styles.
• min-width applies styles from a breakpoint and larger.
• max-width applies styles up to a breakpoint.
• Breakpoints should be based on layout needs.
• Responsive images use max-width: 100% and height: auto.