How to use media queries in a mobile-first approach in HTML ?

Last Updated : 08 Apr, 2024

Designing a responsive website layout that adapts to various devices and screen sizes is achievable through the use of media queries. This adaptability is defined by two key parameters: screen width and orientation.

There are two primary strategies for creating a responsive website:

Mobile-First Approach: This strategy begins with CSS tailored for mobile views. As screen sizes increase, the existing CSS is overwritten using media queries to ensure optimal display.
Desktop-First Approach: This strategy starts with CSS designed for desktop views. As screen sizes decrease, the existing CSS is overwritten using media queries to maintain a user-friendly interface.

By understanding and implementing these approaches, you can create a website that provides an excellent user experience across a wide range of devices.

Here, we are focusing on how to make our website responsive using the former one, Mobile First Approach. This approach uses min-width media queries & landscape orientation.

Syntax:

@media (min-width: 640px) {  
    // CSS properties
}

Example 1: This is the website initially and it is unresponsive.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section>
        <img src=
"https://media.geeksforgeeks.org/img-practice/banner/
 complete-interview-preparation-course-what-will-you-learn.png?v=1643351169"
            alt="">
        <p>Jenny Doe</p>

    </section>
    <main>
        <h1>Geeks For Geeks Courses</h1>
        <p> 
            Complete preparation package will help you 
            learn 4 years' worth of programming knowledge
            in just 6 months!
        </p>

        <div class="projects">
            <img src=
"https://media.geeksforgeeks.org/img-practice/banner/Amazon-Test-Series-thumbnail.png"
                 alt="Project 1">

            <img src=
"https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-thumbnail.png" 
                 alt="Project 2">

            <img src=
"https://media.geeksforgeeks.org/img-practice/banner/
 complete-interview-preparation-course-video-thumbnail-image.png?v=1643351492"
                 alt="Project 3">

            <img src=
"https://media.geeksforgeeks.org/img-practice/banner/
 system-design-live-course-video-thumbnail-image.png"
                 alt="Project 4">
        </div>
    </main>
</body>

</html>

CSS

* {
    box-sizing: border-box;
    font-family: "Mukta", sans-serif;
    color: rgb(10, 146, 10);
}

main {
    overflow-y: scroll;
    height: 100vh;
    padding: 40px;
}

body {
    margin: 0;
    display: grid;
    grid-template-rows: 260px 1fr;
    max-height: 100vh;
    overflow: hidden;
}

h1 {
    margin-top: 0;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 12px;
}

p {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
}

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 7vw;
    border-bottom: solid 1px #dbdce1;
    border-right: none;
    align-items: center;
}

section img {
    border-radius: 50%;
    width: 150px;
}

.projects img {
    width: 100%;
}

.projects {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    align-items: center;
}

Output:

Initial Webpage without media queries

Example 2: This is the website initially now using media queries.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section>
        <img src=
"https://media.geeksforgeeks.org/img-practice/banner/
 complete-interview-preparation-course-what-will-you-learn.png?v=1643351169"
             alt="">
        <p>Jenny Doe</p>

    </section>
    <main>
        <h1>Geeks For Geeks Courses</h1>
        <p>
            Complete preparation package will help you
            learn 4 years' worth of programming knowledge 
            in just 6 months!
        </p>

        <div class="projects">
            <img src=
"https://media.geeksforgeeks.org/img-practice/banner/Amazon-Test-Series-thumbnail.png"
                 alt="Project 1">

            <img src=
"https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-thumbnail.png" 
                 alt="Project 2">

            <img src=
"https://media.geeksforgeeks.org/img-practice/banner/
 complete-interview-preparation-course-video-thumbnail-image.png?v=1643351492"
                 alt="Project 3">

            <img src=
"https://media.geeksforgeeks.org/img-practice/banner/
 system-design-live-course-video-thumbnail-image.png"
                 alt="Project 4">
        </div>
    </main>
</body>

</html>

CSS

/* Initial layout for desktop first */
* {
    box-sizing: border-box;
    font-family: "Mukta", sans-serif;
    color: rgb(10, 146, 10);
}

main {
    overflow-y: scroll;
    height: 100vh;

    padding: 40px;
}

body {
    margin: 0;
    display: grid;
    grid-template-rows: 260px 1fr;

    max-height: 100vh;
    overflow: hidden;
}

h1 {
    margin-top: 0;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;

    margin-bottom: 12px;
}

p {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
}

section {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
    /* display: block; */
    margin-left: 7vw;
    border-bottom: solid 1px #dbdce1;
    border-right: none;
    align-items: center;
}

section img {
    border-radius: 50%;
    width: 150px;
}

.projects img {
    width: 100%;
}

.projects {
    margin-top: 32px;

    display: grid;

    grid-template-columns: repeat(1, 1fr);
    gap: 30px;

    align-items: center;
}

/* Media Queries */
@media (min-width: 640px) {
    .projects {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (min-width: 768px) {
    .projects {
        grid-template-columns: repeat(3, 1fr);
        gap: 50px;
    }

    h1 {
        font-size: 40px;
    }

    p {
        font-size: 18px;
    }
}

@media (min-width: 1024px) {
    .projects {
        grid-template-columns: repeat(4, 1fr);
        gap: 60px;
    }
}

@media (min-width: 640px) and (orientation: landscape) {
    body {
        grid-template-columns: 160px 1fr;
        grid-template-rows: none;
    }

    section {
        border-bottom: none;
        margin-left: -4px;
        border-right: solid 1px #dbdce1;
    }

    section img {
        width: 140px;
    }
}