01 / What You Will Learn

Last week, you used CSS Grid to organize content into rows and columns. Now you will make that layout respond to the space available on the screen.

02 / What Is Responsive Design?

Imagine designing an online portfolio with three columns of artwork. On a desktop, the images may have plenty of room. On a phone, those same three columns could become so narrow that the images and captions are difficult to see.

Responsive design lets you change the layout when the available space changes.

03 / Start with Mobile-First Design

Mobile-first design means writing your basic CSS for a narrow screen first. You then add styles for larger screens using media queries.

This approach encourages you to prioritize the content, keep layouts simple, and avoid squeezing a complicated desktop design into a phone.

.portfolio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

With this starting point, the portfolio has one column. The value 1fr gives the column a flexible share of the available space.

Next, use a media query to introduce two columns when the screen has more room.

@media (min-width: 600px) {
  .portfolio {
    grid-template-columns: repeat(2, 1fr);
  }
}

Then introduce three columns on a wider screen.

@media (min-width: 900px) {
  .portfolio {
    grid-template-columns: repeat(3, 1fr);
  }
}

04 / Understanding Media Queries

A media query lets you apply a CSS rule only when a condition is met. In this lesson, the condition will usually be the width of the browser viewport.

The viewport is the area of the browser window where the webpage is displayed.

@media (max-width: 600px) {
  h1 {
    font-size: 28px;
  }
}

Let’s break it down:

• @media starts the media query.
• max-width: 600px means the rule applies when the viewport is 600 pixels wide or narrower.
• h1 selects the main heading.
• font-size: 28px changes the heading size within that condition.
• The braces group the CSS rules that belong to the media query.

/* Applies at 600px wide or narrower */
@media (max-width: 600px) {
  .intro {
    padding: 16px;
  }
}

/* Applies at 600px wide or wider */
@media (min-width: 600px) {
  .intro {
    padding: 32px;
  }
}

For this week’s project, use the mobile-first pattern with min-width. Start with the small-screen layout, then add adjustments for wider screens.

05 / Make Images Flexible

A responsive layout can still break if an image is wider than its container. One of the most useful CSS rules for images is:

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

This allows an image to shrink to fit its container while maintaining its proportions. It does not force every image to fill the entire screen.

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

.artwork img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

The second rule gives artwork images a consistent display ratio. object-fit: cover fills the image area while cropping excess edges if necessary. Use it thoughtfully so important parts of an image are not lost.

06 / Flexible Widths and Spacing

Responsive design is not only about media queries. Flexible sizing can help your layout work across many screen sizes without adding a separate rule for every device.

.page-container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

This container uses 90% of the available width while leaving a little room at the sides. On large screens, it stops growing at 1100 pixels. The margin: 0 auto rule centers it horizontally.

07 / Guided Practice: Build a Responsive Portfolio

Now you will put these ideas together. The example below is intentionally simple. It uses basic HTML, CSS Grid, flexible images, and two media queries.

You can use your own artwork, photography, graphic design, or other creative interests. The sample artwork uses placeholder image links so you can focus on the layout first.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Responsive Portfolio</title>
</head>
<body>

  <header class="site-header">
    <h1>My Creative Portfolio</h1>
    <p>A collection of work and ideas.</p>
  </header>

  <main class="page-container">
    <section class="portfolio">

      <article class="artwork">
        <img src="https://placehold.co/600x400"
             alt="Placeholder for artwork one">
        <h2>Project One</h2>
        <p>A short project description.</p>
      </article>

      <article class="artwork">
        <img src="https://placehold.co/600x400"
             alt="Placeholder for artwork two">
        <h2>Project Two</h2>
        <p>A short project description.</p>
      </article>

      <article class="artwork">
        <img src="https://placehold.co/600x400"
             alt="Placeholder for artwork three">
        <h2>Project Three</h2>
        <p>A short project description.</p>
      </article>

    </section>
  </main>

</body>
</html>

/* 1. Basic page styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #222222;
  background: #f4f4f4;
}

.site-header {
  padding: 24px;
  text-align: center;
  background: #182849;
  color: white;
}

.page-container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 0;
}

/* 2. Responsive images */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 3. Mobile-first: one column */
.portfolio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.artwork {
  background: white;
  padding: 14px;
  border-radius: 8px;
}

.artwork h2 {
  font-size: 1.2rem;
}

/* 4. Tablet: two columns */
@media (min-width: 600px) {
  .portfolio {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-header {
    padding: 36px;
  }
}

/* 5. Desktop: three columns */
@media (min-width: 900px) {
  .portfolio {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-container {
    padding: 40px 0;
  }
}

Follow these steps

1. Run the starter code. Confirm that the page displays a header and three project cards.
2. Check the mobile layout. Use the CodePen preview at a narrow width. The cards should appear in one column.
3. Add the tablet media query. At 600 pixels and wider, the cards should appear in two columns.
4. Add the desktop media query. At 900 pixels and wider, the cards should appear in three columns.
5. Customize the design. Change the background, typography, card spacing, and headings to fit your creative identity.
6. Test and revise. Resize the preview and look for overflow, awkward spacing, or text that becomes difficult to read.

08 / In-Class Assignment: One Portfolio, Three Views

For this assignment, design a simple, single-page portfolio that adapts to desktop, tablet, and mobile. This is an introductory wireframe-style exercise, so concentrate on the layout and how it changes rather than creating a complicated visual design.

Required layout behavior

Design direction

Choose a subject that interests you: art, photography, illustration, music, fashion, gaming, film, sports, or another creative field. The content is up to you, but the layout must demonstrate responsive behavior.

Keep the design simple. You are being assessed on how well the layout adapts, not on how many effects you can add.

09 / Independent Practice

After completing the in-class assignment, create a second responsive layout based on your own interests. You may use a different subject or adapt the portfolio into a gallery, collection, event page, or small project showcase.

Your independent version should include:

• A clear heading and short introduction.
• At least six content items.
• A mobile-first CSS Grid layout.
• At least two media queries that meaningfully change the layout.
• Responsive images and readable text.
• Your own choices for color, typography, spacing, and visual hierarchy.

10 / Testing Your Design

Responsive design requires testing. A page that looks correct at one width may still have problems at another.

1. Test a narrow screen. Check the preview at approximately 375 pixels wide.
2. Test a tablet-size screen. Check around 768 pixels wide.
3. Test a desktop-size screen. Check around 1200 pixels wide.
4. Resize gradually. Do not check only those three widths. Slowly widen and narrow the preview to find awkward transitions.
5. Check the details. Look for text wrapping, images overflowing, uneven card widths, and cramped spacing.
6. Make improvements. Adjust your CSS and test again.

These widths are testing examples, not universal standards. A responsive website should work across a range of sizes, including widths between your chosen breakpoints.

11 / Common Problems to Avoid

12 / What to Submit

Submit your work through the course’s designated submission area.

How your work will be evaluated

• Responsive behavior: The layout changes appropriately at different widths.
• HTML and CSS: The structure and styling are organized and functional.
• Usability: Content remains readable, images fit, and the page avoids unwanted horizontal scrolling.
• Visual consistency: Typography, colors, and spacing support the design.
• Reflection: You can explain your decisions and identify an improvement.

13 / Key Terms