Make Responsive Design in 3 Steps

This tutorial will show you how to make website responsive in just three simple steps.

Note : This post assumes that you have basic knowledge of Html and Css.

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

Step 1. Meta Tag (viewport)

Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale.

Include below meta tag in the .

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

A viewport element gives the browser instructions on how to control the page’s dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Step 2. Make grid view

A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.

Add the following code in your CSS:

* {
    box-sizing: border-box;
}
[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.row::after{
    content: &quot;&quot;;
    clear: both;
    display: table;
}

* {

box-sizing: border-box;

}

[class*="col-"] {

float: left;

padding: 15px;

border: 1px solid red;

}

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

.row::after{

content: "";

clear: both;

display: table;

}

Step 3. Media queries for common device breakpoints

@media(min-width:320px){/* smartphones, iPhone, portrait 480x320 phones */}
@media(min-width:481px)
{/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */}
@media(min-width:641px)
{/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */}
@media(min-width:961px){/* tablet, landscape iPad, lo-res laptops ands desktops */}
@media(min-width:1025px){/* big landscape tablets, laptops, and desktops */}
@media(min-width:1281px)

@media(min-width:320px){/* smartphones, iPhone, portrait 480x320 phones */}

@media(min-width:481px)

{/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */}

@media(min-width:641px)

{/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */}

@media(min-width:961px){/* tablet, landscape iPad, lo-res laptops ands desktops */}

@media(min-width:1025px){/* big landscape tablets, laptops, and desktops */}

@media(min-width:1281px)

You are done your website is now Mobile Friendly.