Chapter 21 | Mobile Friendly Design

Responsive Web Design

A responsive website adjusts beautifully on mobile, tablet and desktop screens. In this chapter, you will learn viewport, flexible layouts, media queries and mobile-first design.

Start Learning Try Responsive Page

Viewport

Allows webpage to fit device width properly.

Fluid Layout

Uses flexible width instead of fixed width only.

Media Queries

Applies CSS based on screen size.

Breakpoints

Screen sizes where layout changes.

Learning Objectives

After This Chapter, You Will Understand

This chapter helps you build webpages that work smoothly on all screen sizes.

Viewport

Use viewport meta tag for mobile-friendly pages.

Fluid Width

Use %, max-width and flexible units.

Media Queries

Apply different styles at different screen sizes.

Responsive Layout

Make cards, menus and grids adapt to devices.

Responsive Meaning

What is Responsive Web Design?

Responsive web design means creating websites that adjust according to the user's screen size.

1 Simple Meaning

A responsive webpage looks good and remains usable on mobile phones, tablets, laptops and desktop screens. Text, images, menus, cards and layouts should adjust automatically.

Definition: Responsive web design is a technique where webpage layout and content adapt to different screen sizes and devices.

Professional Tip: Most visitors use mobile devices, so mobile-friendly design is essential for modern websites.

Mobile

Tablet

Desktop

Viewport

Viewport Meta Tag

The viewport meta tag tells the browser how to scale the webpage on different devices.

2 Required Meta Tag

This tag should be included in the head section of every responsive webpage.

3 Meaning

width=device-width: page width matches device width
initial-scale=1.0: page starts at normal zoom level
Improves mobile display
Prevents desktop-style shrinking on mobile

Remember: Without viewport tag, mobile layout may look zoomed out or difficult to read.

Fluid Layout

Flexible Width and Images

Responsive design uses flexible sizes instead of only fixed pixels.

Flexible Container

width:80%; max-width:420px;

Element can shrink and grow with screen size.

Flexible Image

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

Images should not overflow outside their container.

Responsive Cards

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

Cards automatically adjust according to available width.

Quick Rule: Avoid fixed widths for major layouts. Use width:100%, max-width, %, fr, auto-fit and minmax where suitable.

Media Queries

Changing CSS Based on Screen Size

Media queries allow CSS to change when the screen becomes smaller or larger.

4 Basic Media Query

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

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

5 Common Breakpoints

Device	Common Width
Mobile	up to 600px
Tablet	601px to 992px
Laptop	993px to 1200px
Desktop	1200px+

Practice Task: Create a three-column card layout and convert it into one column below 768px.

Mobile First

Mobile-First Design

Mobile-first means designing for small screens first, then enhancing for larger screens.

6 Mobile-First Approach

In mobile-first CSS, the default design is for mobile screens. Then we add media queries for tablets and desktops.

/* Mobile default */
.cards {
  display: grid;
  grid-template-columns: 1fr;
}

/* Tablet and desktop */
@media(min-width: 768px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

7 Responsive Checklist

Add viewport meta tag
Use flexible containers
Use max-width for images
Use media queries for layout changes
Check readability on mobile
Test buttons and menus on small screens

Design Tip: Always test important pages on mobile before publishing.

Try It Yourself

Practice Responsive Web Design

Edit media query and resize your browser to see the layout change.

HTML + CSS Code Edit and run

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

body{
            font-family:Arial;
            margin:0;
            background:#f5f9ff;
            color:#334155;
        }

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

.hero{
            background:linear-gradient(135deg,#06285f,#0d6efd);
            color:white;
            padding:45px;
            border-radius:24px;
            text-align:center;
        }

.hero h1{
            font-size:42px;
            margin-bottom:12px;
        }

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

.card{
            background:white;
            padding:22px;
            border-radius:18px;
            box-shadow:0 8px 20px rgba(0,0,0,.08);
        }

.card h2{
            color:#06285f;
        }

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

@media(max-width:768px){
            .hero{
                padding:28px;
                text-align:left;
            }

.hero h1{
                font-size:30px;
            }

.cards{
                grid-template-columns:1fr;
            }
        }
    </style>
</head>
<body>

<div class="container">
        <section class="hero">
            <h1>Responsive Web Design</h1>
            <p>This page adjusts for mobile, tablet and desktop screens.</p>
        </section>

<section class="cards">
            <div class="card">
                <h2>HTML</h2>
                <p>Structure of webpage.</p>
            </div>

<div class="card">
                <h2>CSS</h2>
                <p>Design and layout.</p>
            </div>

<div class="card">
                <h2>Project</h2>
                <p>Build real web pages.</p>
            </div>
        </section>
    </div>

</body>
</html>

Output Preview Browser result

Practice Task: Add one more card, change breakpoint to 900px and reduce hero heading font-size on mobile.

Common Mistakes

Mistakes Students Should Avoid

Responsive design requires planning, testing and flexible layout choices.

Wrong Habits

Forgetting viewport meta tag
Using fixed width for main layout
Not making images flexible
Using desktop design only
Not testing on mobile screen

Correct Habits

Add viewport meta tag
Use width:100% and max-width
Use max-width:100% for images
Use media queries for layout changes
Test readability, spacing and buttons on mobile

Remember: A website is not complete until it works smoothly on mobile.

Quick Revision

Remember These Points

Revise these before moving to Chapter 22.

Responsive Design

It makes webpages adjust to mobile, tablet and desktop screens.

Viewport

The viewport meta tag helps pages display properly on mobile.

Fluid Layout

Flexible width and max-width help layouts adapt.

Media Query

@media applies different CSS at different screen sizes.

Flexible Images

Use max-width:100%; height:auto; for responsive images.

Mobile First

Design for small screens first, then enhance for larger screens.

Protected Learning Content

Responsive Web Design

Viewport

Fluid Layout

Media Queries

Breakpoints

After This Chapter, You Will Understand

Viewport

Fluid Width

Media Queries

Responsive Layout

What is Responsive Web Design?

1 Simple Meaning

Viewport Meta Tag

2 Required Meta Tag

3 Meaning

Flexible Width and Images

Flexible Container

Flexible Image

Responsive Cards

Changing CSS Based on Screen Size

4 Basic Media Query

5 Common Breakpoints

Mobile-First Design

6 Mobile-First Approach

7 Responsive Checklist

Practice Responsive Web Design

Mistakes Students Should Avoid

Wrong Habits

Correct Habits

Test Your Understanding

1. Responsive web design means:

2. Which meta tag is important for mobile-friendly pages?

3. Which CSS rule applies styles based on screen size?

4. Which CSS is good for responsive images?

5. Mobile-first design means:

Remember These Points

Responsive Design

Viewport

Fluid Layout

Media Query

Flexible Images

Mobile First