PUBLISHED ON: AUGUST 16, 2021
How to create a responsive website that will work on all devices?
Responsive website design aims to design a webpage that looks good across every possible device. You can view everything without any confusion. The style may slightly vary according to the size of the device. The responsive design can be achieved with CSS.
A Responsive webpage
The responsive design of the webpage can be achieved by using @media rule. The CSS property for any particular breakpoint is defined using the media query rule. An alternate section of a CSS property is added with @media rule with the type screen to add CSS for that particular breakpoint (screen size).
The breakpoint is a pixel value of the viewport which can be used to customize the HTML element for that viewport. We can define the viewport using max-width or min-width property.
Example: Creating a Responsive webpage
In this example, we have added a responsive navbar that aligns vertically when the page is resized. we have also added a grid layout which width changes to 100% when the screen is smaller. Further, there is also a testimonial.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
overflow: hidden;
background-color: cyan;
}
.navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.active {
background-color: #04AA6D;
color: white;
}
.navbar .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .btn {
font-size: 20px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-menu a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.navbar a:hover, .dropdown:hover .btn {
background-color: #555555;
color: white;
}
.dropdown-menu a:hover {
background-color: #cccccc;
color: black;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.navbar input[type=text] {
padding: 12px;
border: none;
margin-top: 3px;
margin-right: 5px;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 3px;
}
/* Create 3 columns in each row */
.column {
flex: 40%;
max-width: 30%;
padding: 0 3px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
.testimonial {
box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
background: #bbbbbb;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
font-size: 20px;
}
/*clearning float */
.testimonial::after {
content: "";
clear: both;
display: table;
}
.testimonial img {
width: 150px;
height: 150px;
float: left;
border-radius: 50%;
}
.testimonial h2 {
color: blue;
font-size: 50px;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child), .dropdown .btn, .navbar input {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {position: relative;}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive input {
float: none;
display: block;
width: 90%;
padding: 12px;
border: 2px solid black;
text-align: left;
}
.navbar.responsive .dropdown {float: none;}
.navbar.responsive .dropdown-menu {position: relative;}
.navbar.responsive .dropdown .btn {
display: block;
width: 100%;
text-align: left;
}
.column {
flex: 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="navbar" id="nav">
<a href="#" class="active">Home</a>
<a href="#">course</a>
<a href="#">More</a>
<div class="dropdown">
<button class="btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-menu">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
<input type="text" placeholder="Search Here">
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div class="row">
<div class="column">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557458-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557503-101156.jpeg" alt="img">
</div>
<div class="column">
<h2> This is the place for some content</h2>
<p> It is a responsive web page </p>
<p>Responsive website design aims to design a webpage that looks good across every possible device. </p>
<p>You can view everything without any confusion. The style may slightly vary according to the size of the device.</p>
</div>
<div class="testimonial">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628080137-.png" alt="image">
<p> The best learning guidance you get here. User friendly environment. Practise on project. Full on industrial support. </p>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
</body>
</html>
Output
Here is the output of the above example.
Large Screen
Small Screen
Example: Creating a Responsive webpage
Here we have added the responsive footer too. The inline social media button will be displayed in the block when the page is resized.
Conclusion
In this tutorial, we have created a responsive webpage with CSS. We have used @media rule to add responsive CSS. The elements of the webpage will accordingly adjust on reaching the specified width.
