Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

We can organize our layout to suit a wide variety of different devices and their screen sizes and make it responsive using media queries. This variety is defined using 2 types of parameters, screen-width & orientation.

You can take two approaches to create a responsive website:

  • Mobile-first approach: In this approach, the existing CSS is for the mobile view then you overwrite the existing CSS using media queries to fit the increasing width sizes.
  • Desktop first approach: In this approach, the existing CSS is for the desktop view then you overwrite the existing CSS using media queries to fit the decreasing width sizes.

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: This file contain only the HTML part

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <section>
        <img src=
            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=
                 alt="Project 1">
  
            <img src=
                 alt="Project 2">
  
            <img src=
                 alt="Project 3">
  
            <img src=
                 alt="Project 4">
        </div>
    </main>
</body>
  
</html>


CSS: This file contains CSS without the media query.

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: This file contain only the HTML part

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <section>
        <img src=
             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=
                 alt="Project 1">
  
            <img src=
                 alt="Project 2">
  
            <img src=
                 alt="Project 3">
  
            <img src=
                 alt="Project 4">
        </div>
    </main>
</body>
  
</html>


CSS: This file contains CSS with the media query.

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;
    }
}


Output:

Responsive Webpage with media queries



Last Updated : 01 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads