TechTicket Logo
CSS Fundamentals and Modern Layouts

Session 7 — Responsive Design & Media Queries

🎯 Session Overview

Have you ever opened a website on your phone, and the text was so tiny you had to pinch and zoom just to read it? That happens when a website is NOT responsive.

Today, people browse the web on giant desktop monitors, regular laptops, tablets, and tiny smartphones. A modern website MUST look perfect on all of them.

In this session, you will learn:

⏪ Quick Recap: Session 6 (CSS Grid)

In our last session, we learned how to build complex 2D layouts using CSS Grid:

But a 3-column grid that looks great on a laptop will look terribly squished on a mobile phone! Let's fix that.

📱 What is Responsive Design?

Responsive Design is a way of writing CSS so that your website's layout automatically adjusts and "responds" to the size of the user's screen.

Instead of building three separate websites (one for phone, one for tablet, one for desktop), you build ONE website with CSS rules that say: "If the screen is small, stack the boxes vertically. If the screen is wide, put them side-by-side."

The Viewport

The Viewport is the visible area of a web page on a user's device. On a phone, the viewport is narrow (maybe 390px wide). On a desktop, it's very wide (maybe 1920px wide).

Desktop Viewport Resize Mobile Viewport

Notice how the 3 columns on desktop turn into 1 stacked column on mobile.

📏 Media Queries & Breakpoints

How do we actually tell the browser to change the design based on size? We use an "At-Rule" called @media.

A Media Query is basically an if statement for CSS. It says: "If the screen width is less than 768px, apply these special CSS rules."

/* Default Style (Desktop) */
body {
  background-color: darkblue;
}

/* Media Query for smaller screens (Tablets/Phones) */
@media (max-width: 768px) {
  body {
    background-color: lightblue; /* Overrides the default! */
  }
}

A Breakpoint is the exact pixel width where your design "breaks" and needs to change. Common breakpoints used by professionals are:

  • max-width: 480px (Mobile Phones)
  • max-width: 768px (Tablets like iPads)
  • max-width: 1024px (Laptops/Desktops)

You can have multiple @media blocks in your CSS to handle every device perfectly!

✨ Interactive Demo: The Resize Simulator

Click the buttons below to simulate what the user's viewport looks like. Watch how the layout (and background color) changes based on the screen width!

Item 1
Item 2
Item 3

🔄 Responsive Flexbox & Grid Layouts

Flexbox: Wrapping

If you have a Flexbox row of items, and the screen gets too small, they will squish together and look awful. To fix this, we allow the items to wrap onto a new line using flex-wrap.

.container {
  display: flex;
  flex-wrap: wrap; /* If items run out of room, move to next line! */
}

Grid: Changing Columns with Media Queries

With CSS Grid, you can easily use Media Queries to change the number of columns. For example, 3 columns on desktop, 1 column on mobile.

/* Default: 3 columns */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* On mobile: Change to 1 column */
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

🖼️ Responsive Images

If you put a giant 1000px wide image on a mobile phone screen that is only 400px wide, the image will burst out of the screen, causing a terrible horizontal scrollbar.

To fix this, we apply a golden rule to all images in our CSS:

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

max-width: 100%; tells the image: "You can be your normal size, BUT if your parent container is smaller than you, shrink down so you never exceed 100% of the container's width."

height: auto; ensures that when the image shrinks, it doesn't get stretched or distorted out of proportion.

🏋️‍♂️ Practice Exercises

Open your code editor. Create an HTML file and link a CSS file.

Exercise 1: Color Shifter

Set your body background color to blue. Write a Media Query so that if the screen is smaller than 600px (max-width), the background color turns red.

@media (max-width: 600px) { body { background-color: red; } }
To test it, drag the edge of your browser window to make it smaller!

Exercise 2: The Flex Wrap

Create a Flexbox container with 5 boxes inside. Give each box a fixed width of 200px. Add the flex-wrap: wrap; property to the container and shrink your browser window to see them drop to the next line.

Make sure the parent has display: flex; and flex-wrap: wrap;.

Exercise 3: Safe Images

Add a very large image to your HTML file. In your CSS, apply the golden rule (max-width: 100%; height: auto;) so it never breaks your layout.

Just target the img tag directly in your CSS. No classes needed for this general rule.

🔥 Mini Challenge: The Shifting Grid

Create an HTML <div class="grid-gallery"> containing 4 items.

Your Goal:

  1. By default (Desktop), set the grid to have 4 columns (1fr 1fr 1fr 1fr).
  2. Write a Media Query for Tablet (max-width: 800px) that changes the grid to 2 columns (1fr 1fr).
  3. Write a second Media Query for Mobile (max-width: 500px) that changes the grid to 1 column (1fr).
.grid-gallery { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }

@media (max-width: 800px) {
  .grid-gallery { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
  .grid-gallery { grid-template-columns: 1fr; }
}

🏠 Homework Project: Fully Responsive Page

Combine everything you know to build a complete, responsive webpage.

📝 Session Summary

⬅ Previous Session Next Session ➡