Complete Web Designing Course for Beginners

Lesson 5.3 – Media Queries

🌐 Making Websites Automatically Adapt to Different Screen Sizes

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Media Queries

✅ Detect Different Screen Sizes

✅ Create Mobile-Friendly Websites

✅ Create Tablet-Friendly Websites

✅ Create Desktop-Friendly Websites

✅ Change Layouts Dynamically

✅ Build Fully Responsive Websites

📖 Introduction

In the previous lesson, we learned:

📲 Mobile First Design

We created websites for mobile devices first.

But a question arises:

🤔 How does a website know whether it is being opened on:

📱 Mobile

📱 Tablet

💻 Laptop

🖥️ Desktop

The answer is:

📏 CSS Media Queries

🤔 What is a Media Query?

A Media Query is a CSS feature that allows us to apply different styles based on screen size.

Simple Definition

Media Query checks screen size
and applies different CSS rules.

Example

Mobile Screen:

Font Size = 16px

Desktop Screen:

Font Size = 30px

Media Query makes this possible.

🌟 Why Media Queries Are Important?

Without Media Queries:

❌ Website looks the same on all devices

❌ Layout may break

❌ Text may become too small

❌ Navigation may become difficult

With Media Queries:

✅ Better User Experience

✅ Responsive Layout

✅ Mobile Friendly Website

✅ Professional Design

🎯 Basic Syntax

@media (condition)
{

CSS Rules

}

Example

@media (max-width:768px)
{

body{

background-color:lightblue;

}

}

Meaning:

If screen width is
768px or less

Apply the CSS
inside the media query.

🌟 Understanding Screen Width

Common Screen Sizes:

📱 Mobile

320px – 767px

📱 Tablet

768px – 1023px

💻 Laptop

1024px – 1439px

🖥️ Desktop

1440px and above

🎯 Max Width

Most commonly used.

Example

@media (max-width:768px)
{

h1{

font-size:20px;

}

}

Meaning:

If screen width is
768px or smaller

Use font size 20px

🌟 Min Width

Used in Mobile First Design.

Example

@media (min-width:768px)
{

h1{

font-size:30px;

}

}

Meaning:

If screen width is
768px or larger

Use font size 30px

🎯 Mobile First Example

Default Mobile CSS:

h1{

font-size:20px;

}

Tablet and Desktop:

@media (min-width:768px)
{

h1{

font-size:30px;

}

}

Result

Mobile:

20px

Tablet/Desktop:

30px

🌟 First Media Query Program

HTML

<h1>

Learning Media Queries

</h1>

CSS

h1{

font-size:20px;

color:blue;

}

@media (min-width:768px)
{

h1{

font-size:35px;

}

}

Result

Mobile:

Small Heading

Desktop:

Large Heading

🎯 Changing Background Color

CSS

body{

background-color:white;

}

Media Query

@media (max-width:768px)
{

body{

background-color:lightyellow;

}

}

Result

Desktop:

White Background

Mobile:

Yellow Background

🌟 Responsive Navigation Menu

HTML

<nav>

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Courses</a>

<a href="#">Contact</a>

</nav>

CSS

nav{

display:flex;

gap:20px;

}

Desktop Output

Home About Courses Contact

Mobile Media Query

@media (max-width:768px)
{

nav{

flex-direction:column;

}

}

Mobile Output

Home

About

Courses

Contact

🎯 Responsive Grid Example

Desktop

.container{

display:grid;

grid-template-columns:1fr 1fr 1fr;

}

Output

Card1 Card2 Card3

Mobile

@media (max-width:768px)
{

.container{

grid-template-columns:1fr;

}

}

Output

Card1

Card2

Card3

🌟 Responsive Card Example

HTML

<div class="card">

Web Designing Course

</div>

CSS

.card{

width:400px;

background-color:lightblue;

padding:20px;

}

Mobile Version

@media (max-width:768px)
{

.card{

width:100%;

}

}

Result

Desktop:

400px Width

Mobile:

Full Width

🎯 Multiple Media Queries

Example

body{

font-size:16px;

}

Tablet

@media (min-width:768px)
{

body{

font-size:18px;

}

}

Desktop

Res

@media (min-width:1200px)
{

body{

font-size:22px;

}

}

ult

Mobile:

16px

Tablet:

18px

Desktop:

22px

🌟 Complete Practical Program

HTML

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h1>

Responsive Website

</h1>

<p>

Learning CSS Media Queries

</p>

</div>

</body>

</html>

CSS

body{

font-family:Arial;

}

.container{

width:80%;

margin:auto;

padding:20px;

background-color:lightblue;

}

h1{

font-size:22px;

}

@media (min-width:768px)
{

h1{

font-size:35px;

}

}

🎯 Expected Output

Mobile:

Small Heading

Tablet/Desktop:

Large Heading

Responsive behavior automatically.

🏫 Real World Examples

Amazon

Changes product layout.

YouTube

Changes video grid.

Facebook

Changes navigation structure.

Flipkart

Changes product cards.

Educational Websites

Adjust layouts for mobile screens.

⚠️ Common Beginner Mistakes

Mistake 1

Missing Braces

Wrong:

@media (max-width:768px)

h1{

font-size:20px;

}

Correct:

@media (max-width:768px)
{

h1{

font-size:20px;

}

}

Mistake 2

Using Too Many Media Queries

Keep design simple.

Mistake 3

Not Testing on Mobile

Always test:

📱 Mobile

📱 Tablet

💻 Laptop

🌟 Best Practices

✅ Use Mobile First Design.

✅ Prefer min-width.

✅ Keep media queries organized.

✅ Test on multiple devices.

✅ Use Flexbox and Grid with media queries.

🏆 Mini Project – Responsive Course Cards

Create three course cards:

HTML

CSS

JavaScript

Desktop:

HTML CSS JavaScript

Mobile:

HTML

CSS

JavaScript

Use:

@media (max-width:768px)

📝 Practical Activity

Create:

Responsive Navigation Menu

Desktop:

Home About Contact

Mobile:

Home

About

Contact

using Media Queries.

📋 Assignment

Assignment 5.3

What is a Media Query?
Why are Media Queries important?
What is the difference between max-width and min-width?
Create a responsive heading using Media Queries.
Create a responsive navigation menu.
Create a responsive card layout.
Explain Mobile First Design with Media Queries.

🧠 Quiz

Q1. What is a Media Query used for?

A. Database

B. Screen Size Detection

C. Animation

D. Image Editing

✅ Answer: B

Q2. Which keyword is used to create a Media Query?

A. media

B. @screen

C. @media

D. responsive

✅ Answer: C

Q3. Which condition targets smaller screens?

A. min-width

B. max-width

C. screen-width

D. device

✅ Answer: B

Q4. Which condition is preferred in Mobile First Design?

A. max-width

B. min-width

C. width

D. height

✅ Answer: B

Q5. Media Queries help create?

A. Fixed Websites

B. Responsive Websites

C. Databases

D. Servers

✅ Answer: B

📌 Lesson Summary

✅ Media Queries allow websites to adapt to different screen sizes.

✅ @media is used to create responsive CSS rules.

✅ max-width targets smaller screens.

✅ min-width targets larger screens.

✅ Media Queries are essential for Responsive Web Design.

✅ Modern websites use Media Queries extensively.