Media Queries in Desktop First Approach
Last Updated :
29 Jul, 2024
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(
"https://fonts.googleapis.com/css2?family=Mukta:wght@200;400&display=swap"
);
* {
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=
"https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-course-what-will-you-learn.png">
<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=
"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"
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>
Output:
unresponsive pageAbove, 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(
"https://fonts.googleapis.com/css2?family=Mukta:wght@200;400&display=swap"
);
* {
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=
"https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-course-what-will-you-learn.png">
<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=
"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"
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>
Output: Now you get a perfectly responsive website which works for all devices.
Responsive page
Similar Reads
How to use media queries in a mobile-first approach in HTML ?
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 Appro
4 min read
Basics of Responsive Web Design - Media Queries
Media queries in CSS are essential for creating responsive designs that adapt to different device sizes and orientations. They allow developers to apply styles based on various conditions, ensuring optimal display across different devices.What are Media Queries?Media queries enable conditional styli
2 min read
Different ways to add media in HTML page
These days one of the most important things on the web is media. So all the developers and websites owners want to make their websites attractive and interactive. For they need to include media in their sites. There are lots of media types, audio, video, etc. There are different ways to include thos
2 min read
How to target desktop tablet and mobile using Media Query?
Media queries allow targeting different devices by adjusting CSS styles based on their screen size and resolution. By specifying breakpoints, developers can optimize layouts for desktop, tablet, and mobile devices, ensuring a responsive design across various screen sizes.The table below shows the sc
2 min read
HTML DOM Link media Property
The HTML DOM link media property is used to set or return the value of the media attribute of an <link> element. The media attribute is used to specify what type of media devices the target resource is optimized. Syntax: It is used to return the media property. linkObject.media; It is used to
1 min read
HTML | <source> media Attribute
The HTML source media attribute accepts any valid media query that would normally be defined in a CSS. This attribute can accept several values. Syntax: <source media="media_query"> Possible Operators: Value Description and AND operator not NOT operator , OR operator Devices: Value Description
2 min read
Explain the difference in approach when designing a responsive website over a mobile-first strategy
If you heard about Responsive website design and mobile-first approach, then this article is for you. In this article, we will see what is the difference between Responsive website design and the mobile-first approach. In this article, we covered all necessary questions about Responsive website desi
5 min read
CSS @media Rule
The @media CSS at-rule is used to apply a different set of styles for different media/devices using the Media Queries. A Media Query is mainly used to check the height, width, resolution, and orientation(Portrait/Landscape) of the device. This CSS rule is a way out for making more out of responsive
5 min read
What is media object and explain there types in Bootstrap ?
In this article, we will learn about the Bootstrap media object, which is helpful to place the media alongside the text. Also, we will understand the various ways to use the media with text & its implementation through the examples. Media objects are the bootstrap component that helps to build r
6 min read
What is the difference between “screen†and “only screen†in media queries?
Media query is used to create responsive web design. It means that the view of web page differ from system to system based on screen or media types. screen: It is used to set the screen size of media query. The screen size can be set by using max-width and min-width. The screen size is differ from s
2 min read