In the world of web design, responsiveness is key. With the plethora of devices available today, from smartphones to tablets to desktops, ensuring your website looks and functions well across all screen sizes is paramount. One powerful tool in achieving this is CSS media queries.
Media queries allow you to apply CSS styles based on various factors, such as screen size, device orientation, and resolution. By using media queries, you can create a responsive web page that adapts to different devices and screen sizes.
Here’s a step-by-step guide on how to make a web page responsive using media queries:
- Understand the Basics of Media Queries:
- Media queries use the
@mediarule in CSS to apply styles based on certain conditions. They typically target specific ranges of screen widths using themin-widthandmax-widthproperties. - Define Your Breakpoints:
- Before you start writing media queries, it’s essential to define your breakpoints. Breakpoints are specific screen widths at which your layout will change. Common breakpoints include 320px (for smartphones), 768px (for tablets), and 1024px (for desktops).
- Write Your Media Queries:
- Once you’ve defined your breakpoints, you can write your media queries. For example, to target smartphones, tablets, and desktops, you might write the following media queries:
/* Smartphone (portrait and landscape) */
@media only screen and (min-width: 320px) {
/* CSS styles for smartphones */
}
/* Tablet (portrait and landscape) */
@media only screen and (min-width: 768px) {
/* CSS styles for tablets */
}
/* Desktop */
@media only screen and (min-width: 1024px) {
/* CSS styles for desktops */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JOB PROCESS HANDLING HOME PAGE</title>
<style>
.body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff;
text-align: center;
width:100vw;
height:100vh;
overflow: hidden;
}
.div1{
display: inline-block;
width: 20vw; /* Increased width */
height: 30vh; /* Increased height */
border: 2px solid #b9b9b9;
margin-top: 35vh;
margin-bottom: -10vh;
margin-right: 6vh;
margin-left: 4.3vh;
border-radius: 6px; /* Added border-radius for squares */
background-color: rgb(255, 255, 255); /* Changed background color to white */
color: black; /* Changed text color to black */
font-size: 2.4vh;
text-align: center;
cursor: pointer;
overflow: hidden; /* Ensures the image fits inside the square */
background-size: contain; /* Ensures the image fits inside the square */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-position: center; /* Centers the image */
/* Add margin for spacing between icons */
}
.icon {
display: inline-block;
width: 10vw; /* Increased width */
height: 10vh; /* Increased height */
margin-top: 5vh;
border-radius: 10px; /* Added border-radius for squares */
background-color: white; /* Changed background color to white */
color: black; /* Changed text color to black */
font-size: 3vw;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-align: left;
cursor: pointer;
overflow: hidden; /* Ensures the image fits inside the square */
background-size: contain; /* Ensures the image fits inside the square */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-position: center; /* Centers the image */
}
/* Added new style for the heading */
.heading {
background-color:#676f9b;
color: white;
font-size: 2.1vw;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-bottom: 10vh;
border-radius: 10px;
text-align: center;
width: 100vw; /* Make heading width equal to the viewport width */
height: 11vh;
line-height: 4vh;
position: absolute; /* Position the heading absolutely */
left: 0;
top: 0;
}
@media only screen and (orientation: portrait){
.body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff;
text-align: center;
width:100vw;
height:100vh;
align-items: center;
align-content: center;
align-self: center;
vertical-align: middle;
overflow: hidden;
}
.div1{
align-items: center;
align-content: center;
align-self: center;
vertical-align: middle;
display: inline-block;
width: 55%; /* Increased width */
height: 20%; /* Increased height */
border: 2px solid #b9b9b9;
margin-top: 13vh;
padding-top: 1vh;
padding-bottom: 0vh;
margin-bottom: -11vh;
border-radius: 6px; /* Added border-radius for squares */
background-color: rgb(255, 255, 255); /* Changed background color to white */
color: rgb(66, 67, 102); /* Changed text color to black */
font-size: 2.2vh;
text-align: center;
cursor: pointer;
overflow: hidden; /* Ensures the image fits inside the square */
background-size: contain; /* Ensures the image fits inside the square */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-position: center; /* Centers the image */
/* Add margin for spacing between icons */
}
.icon {
display: inline-block;
width: 20vw; /* Increased width */
height: 13vh; /* Increased height */
margin-bottom: -1vh;
margin-top: 1vh;
border-radius: 10px; /* Added border-radius for squares */
background-color: white; /* Changed background color to white */
color: black; /* Changed text color to black */
font-size: 1vh;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-align: left;
cursor: pointer;
overflow: hidden; /* Ensures the image fits inside the square */
background-size: contain; /* Ensures the image fits inside the square */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-position: center; /* Centers the image */
}
/* Added new style for the heading */
.heading {
background-color: #676f9b;
color: white;
font-size: 3vh;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-bottom: 3vh;
align-items: center;
border-radius: 2px;
width: 100vw; /* Make heading width equal to the viewport width */
height: 10vh;
line-height: 4vh;
position: absolute; /* Position the heading absolutely */
left: 0;
top: 0;
}
}
@media only screen and (min-aspect-ratio: 2/3) and (max-aspect-ratio: 1/1){
.body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff;
text-align: center;
overflow: hidden;
width:100vw;
height:100vh;
}
.div1{
display: inline-block;
text-align: center;
width: 80vw; /* Increased width */
height: 22vh; /* Increased height */
border: 2px solid #b9b9b9;
margin-top: 16vh;
padding-top: 1vh;
padding-bottom: 0vh;
margin-bottom: -12vh;
border-radius: 6px; /* Added border-radius for squares */
background-color: rgb(255, 255, 255); /* Changed background color to white */
color: black; /* Changed text color to black */
font-size: 3vw;
text-align: center;
cursor: pointer;
overflow: hidden; /* Ensures the image fits inside the square */
background-size: contain; /* Ensures the image fits inside the square */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-position: center; /* Centers the image */
/* Add margin for spacing between icons */
}
.icon {
display: inline-block;
width: 17vw; /* Increased width */
height: 14vh; /* Increased height */
margin: -2vw;
margin-top: 2vw;
border-radius: 10px; /* Added border-radius for squares */
background-color: white; /* Changed background color to white */
color: black; /* Changed text color to black */
font-size: 1vw;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-align: left;
cursor: pointer;
overflow: hidden; /* Ensures the image fits inside the square */
background-size: contain; /* Ensures the image fits inside the square */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-position: center; /* Centers the image */
}
/* Added new style for the heading */
.heading {
background-color: #676f9b;
color: white;
font-size: 5vw;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-bottom: 10vh;
border-radius: 10px;
text-align: center;
width: 100vw; /* Make heading width equal to the viewport width */
height: 10vh;
line-height: 3vh;
position: absolute; /* Position the heading absolutely */
left: 0;
top: 0;
}
}
@media only screen and (max-aspect-ratio: 3/8){
.body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff;
overflow: hidden;
width:100%;
height:100vh;
}
.div1{
display: inline-block;
width: 80vw; /* Increased width */
height: 22vh; /* Increased height */
border: 2px solid #b9b9b9;
margin-top: 15vh;
padding-top: 0vh;
padding-bottom: 0vh;
margin-bottom: -10vh;
border-radius: 6px; /* Added border-radius for squares */
background-color: rgb(255, 255, 255); /* Changed background color to white */
color: black; /* Changed text color to black */
font-size: 2vh;
text-align: center;
cursor: pointer;
overflow: hidden; /* Ensures the image fits inside the square */
background-size: contain; /* Ensures the image fits inside the square */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-position: center; /* Centers the image */
/* Add margin for spacing between icons */
}
.icon {
display: inline-block;
width: 30vw; /* Increased width */
height: 10vh; /* Increased height */
margin-bottom: -1vh;
margin-top: 3vh;
border-radius: 10px; /* Added border-radius for squares */
background-color: white; /* Changed background color to white */
color: black; /* Changed text color to black */
font-size: 3vh;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-align: left;
cursor: pointer;
overflow: hidden; /* Ensures the image fits inside the square */
background-size: contain; /* Ensures the image fits inside the square */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-position: center; /* Centers the image */
}
/* Added new style for the heading */
.heading {
background-color: #676f9b;
color: white;
font-size: 2.8vh;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-bottom: 40vh;
border-radius: 10px;
text-align: center;
align-items: center;
width: 125vw; /* Make heading width equal to the viewport width */
height: 10vh;
line-height: 3vh;
position:fixed; /* Position the heading absolutely */
left: 0;
top: 0;
}
}
@media only screen and (min-width: 1360px){
.body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff;
overflow: hidden;
}
.div1{
display: inline-block;
width: 25vw; /* Increased width */
height: 32vh; /* Increased height */
border: 2px solid #b9b9b9;
margin-top: 20vh;
margin-bottom: -9vh;
margin-right: 5vh;
border-radius: 6px; /* Added border-radius for squares */
background-color: rgb(255, 255, 255); /* Changed background color to white */
color: black; /* Changed text color to black */
font-size: 3vh;
text-align: center;
align-items: center;
align-self: center;
align-content: center;
cursor: pointer;
overflow: hidden; /* Ensures the image fits inside the square */
background-size: contain; /* Ensures the image fits inside the square */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-position: center; /* Centers the image */
/* Add margin for spacing between icons */
}
.icon {
display: inline-block;
width: 20vw; /* Increased width */
height: 14vh; /* Increased height */
border-radius: 10px; /* Added border-radius for squares */
background-color: white; /* Changed background color to white */
color: black; /* Changed text color to black */
font-size: 1vh;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-align: center;
align-items: center;
align-self: center;
align-content: center;
cursor: pointer;
overflow: hidden; /* Ensures the image fits inside the square */
background-size: contain; /* Ensures the image fits inside the square */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-position: center; /* Centers the image */
}
/* Added new style for the heading */
.heading {
background-color: #676f9b;
color: white;
font-size: 4.3vh;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-bottom: 40px;
border-radius: 10px;
text-align: center;
width: 100vw; /* Make heading width equal to the viewport width */
height: 15vh;
line-height: 4vh;
position: absolute; /* Position the heading absolutely */
left: 0;
top: 0;
}
}
</style>
</head>
<body class="body">
<div >
<!-- Added heading -->
<div class="heading">
</br><b>Job Process Handling</b></br></div>
<!-- Updated icons to squares with images -->
<div class="div1" <i class="fa fa-align-center" aria-hidden="true"></i>
<div class="icon" style="background-image: url('https://6714807-sb1.app.netsuite.com/core/media/media.nl?id=15366&c=6714807_SB1&h=hAqmf_vpY6d9fXKCsPp4tOIeXskillwC0FhPhIfz5QPkakiz'); background-size:contain; " onclick="window.location.href='https://6714807-sb1.extforms.netsuite.com/app/site/hosting/scriptlet.nl?script=1806&deploy=1&compid=6714807_SB1&h=67ca96de68dc16e8a014'"></div>
<p><b>Job Advance</b></p>
</div>
<div class="div1"><div class="icon" style="background-image: url('https://6714807-sb1.app.netsuite.com/core/media/media.nl?id=15367&c=6714807_SB1&h=N6F1yTyIce9sDwIS7BkAX-8BU1Lzav9DidJ6yo5l-f4A5n3Q'); background-size: contain;" onclick="window.location.href='https://6714807-sb1.extforms.netsuite.com/app/site/hosting/scriptlet.nl?script=1648&deploy=1&compid=6714807_SB1&h=28bd1137f496d57e3ba4'"></div>
<p><b>Bin Transfer</b></p>
</div>
<div class="div1"><div class="icon" style="background-image: url('https://6714807-sb1.app.netsuite.com/core/media/media.nl?id=15368&c=6714807_SB1&h=OJlTQk_ldqyDzqjeegiHHHrUhgRAU1y2SOYdOnwxW6ziuOn1'); background-size: contain; " onclick="window.location.href='https://6714807-sb1.extforms.netsuite.com/app/site/hosting/scriptlet.nl?script=1950&deploy=1&compid=6714807_SB1&h=f09b51b847d203306011'"></div>
<p><b>QA Inspection</b></p>
</div>
</div>
</body>
</html>