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 .

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:

Step 3. Media queries for common device breakpoints

You are done your website is now Mobile Friendly.