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 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.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<img src=
"https://media.w3wiki.net/img-practice/banner/
complete-interview-preparation-course-what-will-you-learn.png?v=1643351169"
alt="">
<p>Jenny Doe</p>
</section>
<main>
<h1>Beginner For Beginner 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.w3wiki.net/img-practice/banner/Amazon-Test-Series-thumbnail.png"
alt="Project 1">
<img src=
"https://media.w3wiki.net/img-practice/banner/dsa-self-paced-thumbnail.png"
alt="Project 2">
<img src=
"https://media.w3wiki.net/img-practice/banner/
complete-interview-preparation-course-video-thumbnail-image.png?v=1643351492"
alt="Project 3">
<img src=
"https://media.w3wiki.net/img-practice/banner/
system-design-live-course-video-thumbnail-image.png"
alt="Project 4">
</div>
</main>
</body>
</html>
* {
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:
Example 2: This is the website initially now using media queries.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<img src=
"https://media.w3wiki.net/img-practice/banner/
complete-interview-preparation-course-what-will-you-learn.png?v=1643351169"
alt="">
<p>Jenny Doe</p>
</section>
<main>
<h1>Beginner For Beginner 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.w3wiki.net/img-practice/banner/Amazon-Test-Series-thumbnail.png"
alt="Project 1">
<img src=
"https://media.w3wiki.net/img-practice/banner/dsa-self-paced-thumbnail.png"
alt="Project 2">
<img src=
"https://media.w3wiki.net/img-practice/banner/
complete-interview-preparation-course-video-thumbnail-image.png?v=1643351492"
alt="Project 3">
<img src=
"https://media.w3wiki.net/img-practice/banner/
system-design-live-course-video-thumbnail-image.png"
alt="Project 4">
</div>
</main>
</body>
</html>
/* 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: