InnoMarts logo
InnoMarts
Fast websites
← Back to course

Responsive Design

Responsive Design

Welcome back.

In the previous lesson, you learned CSS Grid.

Rows.

Columns.

Cards behaving like disciplined little boxes.

Very nice.

Now we need to make those layouts work on different screen sizes.

Because a website that looks beautiful only on your laptop is not finished.

It is just confident in one room.

Users may open your site on:

Responsive design helps your website adapt.

The goal is simple:

Make the page readable, usable, and pleasant on every screen.

Without forcing users to zoom, scroll sideways, or question your life choices.

What You’ll Learn

In this lesson, you’ll learn:

What Is Responsive Design?

Responsive design means building websites that adapt to different screen sizes.

A desktop layout may have:

A phone layout usually needs:

Responsive design is not about making five different websites.

It is about creating one flexible website.

One website.

Many screens.

Less chaos.

More dignity.

The Viewport Meta Tag

Responsive design starts in HTML.

Inside the head, you should have this line:

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

This tells the browser:

Use the real width of the device and do not pretend the phone is a tiny desktop.

Without this line, mobile browsers may zoom or scale the page strangely.

Your CSS can be perfect.

But without the viewport meta tag, the phone may still behave like it found your layout in an ancient cave.

Always include it.

Create the Project

Create a folder for this lesson:

mkdir css-lesson7
cd css-lesson7
touch index.html
touch style.css

You should have:

css-lesson7/
  index.html
  style.css

Open the folder in your editor.

We will build a small responsive page with:

Then we will make it adapt to smaller screens.

No panic.

Just CSS.

Which is sometimes the same thing.

But today we stay calm.

Write the HTML

Open index.html and add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Design</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <nav class="navbar">
      <h1 class="logo">ResponsiveSite</h1>

      <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Courses</a>
        <a href="#">Projects</a>
        <a href="#">Contact</a>
      </div>
    </nav>

    <section class="hero">
      <div class="hero-text">
        <h2>Build Websites for Every Screen</h2>
        <p>
          Responsive design helps your layout adapt to phones, tablets, laptops, and large monitors.
        </p>
        <a href="#" class="button">Start Learning</a>
      </div>

      <div class="hero-image">
        <img src="https://via.placeholder.com/600x400" alt="Responsive design example">
      </div>
    </section>
  </header>

  <main class="page">
    <section class="intro">
      <h2>Why Responsive Design Matters</h2>
      <p>
        People visit websites from many devices. Your layout should work everywhere, not only on your favorite screen.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <h2>Flexible Layouts</h2>
        <p>Use flexible widths, Grid, and Flexbox to create layouts that adapt.</p>
      </article>

      <article class="card">
        <h2>Readable Text</h2>
        <p>Text should stay comfortable to read on both small and large screens.</p>
      </article>

      <article class="card">
        <h2>Media Queries</h2>
        <p>Use media queries to change styles at different screen sizes.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Created while learning responsive design.</p>
  </footer>
</body>
</html>

This HTML includes the viewport meta tag.

Good.

Your page is already more prepared for mobile screens than many websites from 2009.

A small victory.

Start with Base CSS

Open style.css and add:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

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

Important part:

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

This makes images responsive.

The image will not become wider than its container.

Without this, large images can break the layout.

Images are like enthusiastic guests.

Nice to have.

But they need boundaries.

Style the Header and Navbar

Add this:

.site-header {
  background-color: #111827;
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

On desktop, the logo and links will be on the same row.

This is fine for wide screens.

But on phones, there may not be enough space.

We will fix that later with a media query.

For now, desktop layout first.

Like building the table before deciding where the cat will sit.

Style the Hero Section

Add:

.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.hero-text h2 {
  margin: 0 0 16px;
  font-size: 48px;
  line-height: 1.1;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

.hero-image img {
  border-radius: 24px;
  border: 2px solid #374151;
}

The hero uses Grid with two columns:

grid-template-columns: 1fr 1fr;

This is good for desktop.

Text on one side.

Image on the other.

Very respectable.

But on a phone, two columns can become too narrow.

So later we will turn it into one column.

CSS must learn manners.

Style the Main Page

Add:

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

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

This gives the content a comfortable width.

The max-width keeps the page from becoming too wide.

The padding keeps content away from the screen edges.

On phones, edge padding is very important.

Text touching the screen edge feels uncomfortable.

Like a chair with one suspicious leg.

Create Responsive Cards

Add:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.card h2 {
  margin-top: 0;
  font-size: 24px;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

On desktop, we show three cards in one row.

That is good.

But on tablets and phones, we need fewer columns.

This is where media queries enter.

Media queries are like CSS saying:

“Under certain conditions, I will behave differently.”

Very mature.

If only all layouts were so emotionally available.

What Is a Media Query?

A media query lets you apply CSS only when certain conditions are true.

Example:

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

This means:

If the screen is 800px wide or smaller, make cards one column.

Media queries are essential for responsive design.

They let your layout adapt.

Not panic.

Adapt.

Big difference.

Make the Layout Responsive

Add this at the bottom of your CSS:

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

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-text h2 {
    font-size: 40px;
  }
}

Now:

This is better for tablets and smaller screens.

Not perfect yet.

But better.

Responsive design is not one giant fix.

It is a series of reasonable decisions.

Like life.

But with more semicolons.

Improve the Phone Layout

Add another media query:

@media (max-width: 560px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero {
    padding: 48px 20px;
  }

  .hero-text h2 {
    font-size: 34px;
  }

  .hero-text p {
    font-size: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .intro,
  .card {
    padding: 24px;
  }
}

Now on phones:

This is responsive design in action.

The same HTML.

Different layout depending on the screen.

Very powerful.

Very useful.

Almost suspiciously civilized.

Mobile-First CSS

There are two common approaches:

Desktop-first:

.cards {
  grid-template-columns: repeat(3, 1fr);
}

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

Mobile-first:

.cards {
  grid-template-columns: 1fr;
}

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

Mobile-first means you write the mobile layout first, then add larger layouts for bigger screens.

It is often a good approach.

Why?

Because small screens have more constraints.

If your design works on a phone, expanding it for desktop is usually easier.

Like packing a backpack first, then moving into a house.

Not the other way around.

Flexible Widths

Avoid fixed widths when possible.

Bad:

.card {
  width: 400px;
}

This can break on small screens.

Better:

.card {
  width: 100%;
  max-width: 400px;
}

Or let Grid control the width:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Fixed widths are not always bad.

But they should be used carefully.

A fixed width on desktop may become a disaster on mobile.

CSS remembers everything.

And mobile exposes your sins.

Responsive Text

Large desktop headings may be too big on phones.

Desktop:

.hero-text h2 {
  font-size: 48px;
}

Phone:

@media (max-width: 560px) {
  .hero-text h2 {
    font-size: 34px;
  }
}

This keeps text readable without overwhelming the screen.

Big text is nice.

Text that eats the whole phone screen is not nice.

That is not a heading.

That is a hostage situation.

Complete CSS

Your style.css should look like this:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.site-header {
  background-color: #111827;
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.hero-text h2 {
  margin: 0 0 16px;
  font-size: 48px;
  line-height: 1.1;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

.hero-image img {
  border-radius: 24px;
  border: 2px solid #374151;
}

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

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.card h2 {
  margin-top: 0;
  font-size: 24px;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

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

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-text h2 {
    font-size: 40px;
  }
}

@media (max-width: 560px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero {
    padding: 48px 20px;
  }

  .hero-text h2 {
    font-size: 34px;
  }

  .hero-text p {
    font-size: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .intro,
  .card {
    padding: 24px;
  }
}

Save the file.

Refresh the browser.

Resize the window.

The layout should change.

Desktop:

Tablet:

Phone:

Congratulations.

Your layout is no longer afraid of phones.

Common Mistakes

Forgetting the viewport meta tag

Without this:

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

mobile layout can behave badly.

Always include it.

Do not negotiate with this line.

It is small but powerful.

Like a tiny CSS bodyguard.

Creating horizontal scrolling

Horizontal scrolling often happens because something is too wide.

Common causes:

If your page scrolls sideways on mobile, investigate.

Sideways scrolling is usually a cry for help.

Making text too small

Phone users should not need a microscope.

Bad:

p {
  font-size: 12px;
}

Better:

p {
  font-size: 16px;
  line-height: 1.6;
}

Readable text matters.

A beautiful layout with unreadable text is just decoration with trust issues.

Practice

Create a responsive page with:

Make it work like this:

Use:

Test by resizing the browser.

Do not just trust your eyes on one screen.

One screen lies.

Many screens tell the truth.

Mini Challenge

Take the card grid from the previous lesson.

Make it responsive:

Then add a responsive hero above it.

Use Grid for the hero.

Use Grid for the cards.

Use Flexbox for the navbar.

This is a real website layout pattern.

You are not just learning theory.

You are building the kind of structure used on real websites.

The layout is growing up.

Try not to cry.

Summary

Today you learned:

A website must work where users actually are.

And users are everywhere.

Phones.

Tablets.

Laptops.

Strange devices.

Maybe even smart fridges.

Do not build only for your own screen.

Build for real life.

Real life has many screen sizes and very little patience.

Next Lesson

In the next lesson, we will learn backgrounds, borders, and shadows.

We will make sections, cards, and buttons look more polished.

Not overdecorated.

Polished.

There is a difference.

A very important difference.