CSS Responsive Design

· CSS3 Module

In today’s digital world, a website is no longer viewed only on a computer.
People open websites on phones, tablets, laptops, smart TVs, and even watches.
A modern website must behave like water — changing its shape according to the container.

That ability is called Responsive Design.

What is Responsive Design?

Responsive Design means:

“A website that automatically adjusts its layout, size, and appearance according to the screen size of the device.”

A responsive website looks good on:

  • Mobile phones
  • Tablets
  • Laptops
  • Desktop computers

Without responsive design:

  • Text becomes too small
  • Buttons become difficult to click
  • Images overflow
  • Users must zoom in/out

With responsive design:

  • Content fits naturally
  • Navigation becomes easier
  • User experience improves
  • Website looks professional

Real Life Example

Imagine water inside different containers.

  • In a glass → shape changes
  • In a bottle → shape changes
  • In a bowl → shape changes

But water still remains water.

Responsive websites behave the same way.

Why Responsive Design is Important

1. Mobile Users Are Increasing

Most users today browse from phones.

A non-responsive website loses visitors quickly.

2. Better User Experience

Users stay longer on websites that are easy to use.

3. SEO Benefits

Google prefers mobile-friendly websites in search results.

4. Faster Development

Instead of creating:

  • one mobile website
  • one desktop website

Responsive design uses one flexible website.

Example of Responsive Website Behavior

Desktop View

[ Logo ] [ Menu ] [ Search ]
--------------------------------
| Sidebar | Main Content Area |
--------------------------------

Mobile View

[ Logo ]
[ Menu Button ]
----------------
Main Content
----------------
Sidebar Below

The layout changes automatically depending on screen width.

Media Queries

What are Media Queries?

Media Queries allow CSS to apply different styles for different screen sizes.

They are the heart of responsive design.

Syntax of Media Query

@media screen and (max-width: 768px) {

}

Meaning:

“Apply these styles when screen width is 768px or smaller.”

Real Example

HTML

<div class="box">
    Responsive Box
</div>

CSS

.box{
    width: 500px;
    background-color: blue;
    color: white;
    padding: 20px;
}

/* Mobile Screen */
@media screen and (max-width: 768px){

    .box{
        width: 100%;
        background-color: green;
    }

}

Logic Behind It

On Desktop

  • Width = 500px
  • Background = Blue

On Mobile

  • Width becomes 100%
  • Background changes to Green

Website adapts automatically.

Common Breakpoints

Device Width
Mobile 0px – 768px
Tablet 768px – 1024px
Laptop/Desktop 1024px+

Responsive Units

Traditional fixed units like px are not always flexible.

Responsive design uses flexible units.

1. vw (Viewport Width)

vw means:

Percentage of browser width.

Example

width: 50vw;

Meaning:

  • Element takes 50% of screen width.

Real Example

<div class="banner">
    Welcome
</div>

.banner{
    width: 80vw;
    height: 200px;
    background-color: orange;
}

Logic

If screen width is:

  • 1000px → element width = 800px
  • 500px → element width = 400px

Automatically responsive.

2. vh (Viewport Height)

vh means:

Percentage of screen height.

Example

height: 100vh;

Meaning:

  • Full screen height.

Real Example

.hero{
    height: 100vh;
    background-color: black;
    color: white;
}

This creates a full-screen hero section.

Real World Use

Used in:

  • Landing pages
  • Hero sections
  • Fullscreen banners

3. rem

rem means:

Relative to root font size.

Default browser font size:

16px

Example

font-size: 2rem;

Calculation:

2 × 16px = 32px

Why rem is Important

If user increases browser font size:

  • Entire website scales properly

Better accessibility.

Real Example

h1{
    font-size: 3rem;
}

p{
    font-size: 1rem;
}

4. em

em means:

Relative to parent element size.

Example

.parent{
    font-size: 20px;
}

.child{
    font-size: 2em;
}

Child size becomes:

40px

Because:

2 × 20px

Difference Between rem and em

Unit Based On
rem Root element
em Parent element

Mobile First Design

What is Mobile First Design?

Mobile First means:

Design website for mobile devices first, then expand for larger screens.

Why Mobile First?

Because:

  • Most users use phones
  • Mobile screens are smaller
  • Simpler layouts improve performance

Traditional Method

Old approach:

Desktop → Tablet → Mobile

Problems:

  • Mobile becomes overloaded
  • Difficult optimization

Mobile First Approach

Modern approach:

Mobile → Tablet → Desktop

Cleaner and faster.

Mobile First Example

CSS

.container{
    width: 100%;
    padding: 10px;
}

/* Larger screens */
@media screen and (min-width: 768px){

    .container{
        width: 70%;
        margin: auto;
    }

}

Logic

Mobile

  • Width = 100%
  • Fits small screens

Desktop

  • Width = 70%
  • Center aligned

Website grows gradually.

Real World Example

E-commerce Website

Mobile

  • Single product column
  • Small menu
  • Touch-friendly buttons

Desktop

  • Multiple columns
  • Sidebar filters
  • Large navigation bar

Same website, different experience.

Best Practices for Responsive Design

1. Use Flexible Layouts

Avoid fixed widths.

Bad:

width: 1200px;

Good:

width: 90%;

2. Use Media Queries Properly

Design for multiple screen sizes.

3. Use Responsive Images

img{
    max-width: 100%;
}

Images never overflow.

4. Use Relative Units

Prefer:

  • %
  • rem
  • em
  • vw
  • vh

Instead of only px.

5. Test on Different Devices

Always check:

  • Mobile
  • Tablet
  • Laptop

Complete Responsive Example

HTML

<div class="container">

    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>

</div>

CSS

.container{
    display: flex;
    gap: 20px;
}

.card{
    flex: 1;
    padding: 20px;
    background-color: lightblue;
}

/* Mobile Layout */
@media screen and (max-width: 768px){

    .container{
        flex-direction: column;
    }

}

Output Logic

Desktop

Cards appear side by side.

[Card1] [Card2] [Card3]

Mobile

Cards stack vertically.

[Card1]
[Card2]
[Card3]

Perfect responsiveness.

Common Beginner Mistakes

Mistake Problem
Using too many fixed widths Layout breaks
Ignoring mobile users Poor UX
Large text/images Overflow issues
No media queries Non-responsive website
Only testing on desktop Hidden mobile bugs

Learning Outcome

After learning Responsive Design, students will be able to:

  • Build mobile-friendly websites
  • Use media queries effectively
  • Create flexible layouts
  • Use responsive units properly
  • Design websites for all devices
  • Apply mobile-first development techniques
  • Improve user experience professionally

Final Thought

Responsive Design is not just a CSS skill.
It is a philosophy of adaptability.

A good developer does not force users to adjust to the website.
The website adjusts itself for the user.

That is the beauty of modern web design: flexible like wind, structured like architecture, and accessible like an open door.

List of Modules

Anas Khan
Written by