Making the Website Responsive

Previous Next

Using Media Queries to Build Mobile-Friendly Websites

In this chapter, students learn how to make the website responsive for mobile devices using CSS media queries. By the end of this chapter, the website will adapt properly to desktop, tablet, and mobile screens.

Chapter Goal

Understand responsive design
Learn why media queries are needed
Adjust layout for smaller screens
Make header, hero, about, and services mobile-friendly

What is Responsive Web Design?

Responsive web design means a website adapts to different screen sizes such as desktop, tablet, and mobile phones. This is achieved using media queries in CSS.

What is a Media Query?

A media query allows CSS to run only when a condition is true.


@media (max-width: 768px) {
    /* CSS for mobile screens */
}

Run Code

This means the CSS inside will apply when the screen width is 768px or less.

Step 1: Responsive Header

Add this code below your header styles in styles.css.


@media (max-width: 768px) {
    header{
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 0px 15px;
    }

    .links-box ul{
        margin-bottom: 20px;
    }
}

Run Code

This stacks the logo and navigation menu on smaller screens.

Step 2: Responsive Hero Section


#hero{
    background-image: url(hero-bg.jfif);
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 50px;
    text-align: center;
}

@media (max-width: 768px) {
    #hero{
        padding: 50px 15px;
        text-align: center;
    }
}

Run Code

Padding is reduced to fit mobile screens properly.

Step 3: Responsive About Section


@media (max-width: 768px) {
    #about-box{
        padding: 0px 15px;
        flex-wrap: wrap;
    }

    #about-text-box,
    #about-image-box{
        width: 100%;
    }

    #about-text-box{
        text-align: justify;
    }
}

Run Code

The About section stacks vertically on mobile devices.

Step 4: Responsive Services Section


@media (max-width: 768px) {
    #services-box{
        padding: 0px 15px;
        flex-wrap: wrap;
    }

    .service-box{
        width: 100%;
    }
}

Run Code

Service boxes appear one below another on mobile screens.

Final Responsive CSS Structure

Desktop styles are written first
Mobile styles are added using media queries
This follows professional web development standards

Beginner Notes

Always design for desktop first
Then optimize for mobile
Avoid unnecessary CSS duplication

Practice Task

Change the breakpoint to 600px
Reduce font size for mobile screens
Add extra padding for mobile layout

Chapter Summary

Learned responsive design concepts
Used media queries effectively
Made all major sections mobile-friendly
Built a professional responsive website

Watch video

Previous Next