Open In App

Media Queries in Desktop First Approach

Improve
Improve
Like Article
Like
Save
Share
Report

A good website needs to be responsive, which is done by using CSS media queries. Media queries are used to create new CSS or overwrite existing CSS to modify the layout of the screen depending on its size. There are two parameters that are used usually individually or together with media query to define the screen dimension, max-width/min-width, and orientation.

There are also two approaches that can be taken to create a responsive website:

1) Mobile-first approach: In this approach, the initial CSS is for the mobile view and then the media query is used to overwrite the existing CSS to fit the increasing viewport width. GeeksForGeeks has an article at  https://www.geeksforgeeks.org/how-to-use-media-queries-in-a-mobile-first-approach-in-html/ in case you are interested to know more about the Mobile-First Approach of Media Queries.

2) Desktop first approach: In this article, we learn about Desktop First Approach, in this approach, the initial CSS is for the desktop view then the media query is used to overwrite the existing CSS to fit the decreasing viewport width.

Here, we are focusing on the Desktop first approach, we use the parameter max-width instead of width because the styles need to be constrained below a certain viewport size, with decreasing screen width.

We have an initial website below, which is only styled for desktop view, with a profile section on the left and 4 columns in the portfolio section. But with decreasing screen width, the website layout does not fit into the viewport.

Code:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        /* Initial layout for desktop first */
        @import url(
        );
  
        * {
            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-columns: 200px 1fr;
            color: #333;
            max-height: 100vh;
            overflow: hidden;
        }
  
        h1 {
            margin-top: 0;
            font-size: 40px;
            line-height: 1;
            text-transform: uppercase;
            margin-bottom: 12px;
        }
  
        p {
            margin: 0;
            font-size: 18px;
            color: #434343;
            font-weight: 300;
        }
  
        section {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-right: 1px solid #dbdce1;
            width: 10em;
            cursor: pointer;
            padding: 10px;
        }
  
        section img {
            border-radius: 50%;
        }
  
        section p:hover {
            text-decoration: underline;
        }
  
        .projects {
            margin-top: 32px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 60px;
            align-items: center;
        }
  
        img {
            width: 100%;
        }
    </style>
    <title>Geeks Courses - CSS Media Queries</title>
</head>
  
<body>
    <section>
        <img
            src=
          
<p>Jenny Doe</p>
  
    </section>
  
    <main>
        <h1>GEEKS FOR GEEKS PROJECTS</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>


Output:

Unresponsive website, without media queries.

Above, you see that the webpage is perfect for the desktop view but as the screen width is reduced the webpage loses its structure. Therefore, arises the need to use media queries to align the webpage as per the width and orientation of the screen.

Media queries overwrite the code for various screen widths and make the website responsive.

For example, when the website is: 

1. Narrower than 1024px: We want to keep 3 columns and 60px gap when the screen is narrower than 1024px.

CSS




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


2. Narrower than 768px: We want to  keep 2 columns, 40px gap, 16px text font and 30px heading font when the screen is narrower than 768px.

CSS




@media (max-width: 768px) {  
  .projects {    
    grid-template-columns: repeat(2, 1fr);    
    gap: 40px;  
  }  
  h1 {    
    font-size: 30px;  
  }  
  p {    
    font-size: 16px;  
  
}


3. Narrower than 640px: We want to keep a single column of projects when the screen is narrower than 640px.

CSS




@media (max-width: 640px) {  
  .projects {    
    grid-template-columns: repeat(1, 1fr);  
  
}


4. Narrower than 640px and in portrait mode: We want to put the profile section on the top of the page instead of on the left with a width 300px when the screen is narrower than 640px and the screen orientation is in portrait mode.

CSS




@media (orientation: portrait) and (max-width: 640px) {  
  body {    
    grid-template-rows: 260px 1fr;    
    grid-template-columns: none;  
  }  
  section {    
    display: block;    
    margin-left: 30vw;    
    border-bottom: solid 1px #dbdce1;    
    border-right: none;    
    align-items: center;  
  
}


Now, when you include all the above media queries for various widths into the original code. You get a completely responsive website.

Code:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        /* Initial layout for desktop first */
        @import url(
        );
  
        * {
            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-columns: 200px 1fr;
            color: #333;
            max-height: 100vh;
            overflow: hidden;
        }
  
        h1 {
            margin-top: 0;
            font-size: 40px;
            line-height: 1;
            text-transform: uppercase;
            margin-bottom: 12px;
        }
  
        p {
            margin: 0;
            font-size: 18px;
            color: #434343;
            font-weight: 300;
        }
  
        section {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-right: 1px solid #dbdce1;
            width: 10em;
            cursor: pointer;
            padding: 10px;
        }
  
        section img {
            border-radius: 50%;
        }
  
        section p:hover {
            text-decoration: underline;
        }
  
        .projects {
            margin-top: 32px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 60px;
            align-items: center;
        }
  
        img {
            width: 100%;
        }
  
        /* Media queries */
        @media (max-width: 1024px) {
            .projects {
                grid-template-columns: repeat(3, 1fr);
                gap: 50px;
            }
        }
  
        @media (max-width: 768px) {
            .projects {
                grid-template-columns: repeat(2, 1fr);
                gap: 40px;
            }
  
            h1 {
                font-size: 30px;
            }
  
            p {
                font-size: 16px;
            }
        }
  
        @media (max-width: 640px) {
            .projects {
                grid-template-columns: repeat(1, 1fr);
            }
        }
  
        @media (orientation: portrait) and (max-width: 640px) {
            body {
                grid-template-rows: 260px 1fr;
                grid-template-columns: none;
            }
  
            section {
                display: block;
                margin-left: 30vw;
                border-bottom: solid 1px #dbdce1;
                border-right: none;
                align-items: center;
            }
        }
    </style>
    <title>Geeks Courses - CSS Media Queries</title>
</head>
  
<body>
    <section>
        <img
            src=
          
<p>Jenny Doe</p>
  
    </section>
    <main>
        <h1>GEEKS FOR GEEKS PROJECTS</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>


Output: Now you get a perfectly responsive website which works for all devices.

Completely responsive website for all widths and orientations.



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