Responsive Design with Media Queries | Lecture 26

Let’s begin with Lecture 26 of the HTML5 & CSS3 series. Responsive Design with Media Queries – Make Your Site Look Great on All Devices. This lecture is for absolute beginners; even kids can follow along and understand.

🎯 Objective:

By the end of this lecture, you will:

• Understand what responsive design is and why it’s important
• Know how to use media queries to adjust layout based on screen size
• Be able to create layouts that adapt to mobile phones, tablets, and desktops
• Build a responsive version of your card layout or navigation bar
• Make your website truly mobile-friendly

📱 What Is Responsive Design?

Responsive design means creating websites that look good and work well on all devices, from large desktop monitors to small mobile phones.

Think of it like this:

If your website was a car, then responsive design is its suspension system — it adapts smoothly to any road (screen size)!

🔍 Why Use Media Queries?

Media queries allow you to apply different CSS styles depending on:

• Device width and height
• Orientation (portrait or landscape)
• Resolution (high-DPI screens like Retina displays)

They’re the key to making your site look great no matter how someone is viewing it.

🧠 Basic Syntax of a Media Query

@media only screen and (condition) {
    /* CSS rules go here */
}

Common Conditions:

📏 Common Breakpoints for Responsive Design

These are not strict rules — they can vary based on your content.

💻 Try This: Make Your Card Layout Responsive

Let’s update your Flexbox card layout from Lecture 21 so it looks great on all screen sizes using media queries.

Step 1: Open flex-card-layout.html

If you haven’t already created it, review Lecture 21 (Advanced Flexbox | Lecture 21 ) to build it first.

Step 2: Add These Media Queries

Update your <style> section like this:

<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
        padding: 40px;
        background-color: #f9f9f9;
    }

    h1 {
        text-align: center;
        color: #333;
    }

    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .card {
        flex: 1 1 calc(33% - 20px);
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        padding: 20px;
        box-sizing: border-box;
    }

    .card h3 {
        margin-top: 0;
    }

    /* Tablet View */
    @media (max-width: 768px) {
        .card {
            flex: 1 1 calc(50% - 20px); /* 2 cards per row */
        }
    }

    /* Mobile View */
    @media (max-width: 480px) {
        .card {
            flex: 1 1 100%; /* 1 card per row */
        }
    }
</style>

This makes your card layout:

• Show 3 cards per row on desktop
• Switch to 2 cards per row on tablets
• Show 1 card per row on phones

Step 3: Run with Live Server

Right-click the code → Show All Commands → Launch Live Server

Resize your browser window and watch the layout change automatically!
🎉 You’ve just built a fully responsive card layout!

💡 Bonus: Make Your Flex Navbar Stack on Small Screens

Go back to flex-navbar.html And add this inside your <style> block:

/* Mobile View */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
    }

    .nav-links li {
        width: 100%;
    }
}

Now your navbar stacks vertically on smaller screens — perfect for mobile users!

🧪 Try It Yourself!

1. Add a new breakpoint at max-width: 992px to make the layout switch to 2 columns earlier.
2. Add a transition effect to your cards so they slide in smoothly when resizing.
3. Style the mobile menu differently — maybe with more padding or rounded corners.
4. Test your layout on real devices using your phone or browser dev tools.

🚀 Next Lecture Preview:

In Lecture 27, we’ll dive into CSS Variables (Custom Properties) — learn how to define and reuse colors, fonts, and other values across your entire website with ease and flexibility!

Stay Updated

If you found this information useful, don’t forget to bookmark this page and Share.

HTML5 and CSS3 Compleate Series