10 August 2020   |   by Avneet Kaur   |   Web Development, Blogs

Responsive web design basics

Understanding Basics of Responsive web design


New to web designing? No problem at all. In this tutorial we will tell you how to proceed in creating a responsive web design in an easy way.




What do you understand by Responsive?

Responsive means the capability of the layout to adapt itself according to different screens. In simple terms, it means that the web design is looking representable in mobiles, laptops, desktops, tablets by simply modifying it's CSS .




Step by step implementation

1. The first thing to do is adding the meta tag to all your html/web files.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> This meta tag informs the browser how to handle the page layout.

2. Using Media Query: Media Query is a CSS technique. To implement media query, we use tag @media. To make our web design look good in all types of devices, we need to set breakpoints at certain values. Then we add different CSS for different breakpoints. Some common breakpoints are as follows:

i. For mobiles having width less than equal to 600px.
@media only screen and (max-width: 600px) {...}

ii. For tablets having minimum width of 768px.
@media only screen and (min-width: 768px) {...}

iii. For laptops and desktops having minimum width of 992px.
@media only screen and (min-width: 992px) {...}

You can also set your own breakpoint.

3. After selecting your breakpoint, add the following line of code in your css.
@media only screen and ({max-width}/{min-width}: {value}px)
{
CSS code……
}

4. Now write your css that will be applied according to your media query.
For example,
The following code displays the the heading(h2) when the width of the device is greater than 600 px.
HTML file, p1.html CSS file, p1.css
This is how you can control the css according to the width of your device. You can add more than one media query in your css file in a similar manner by adding another media query tag.

5. Common problem: It may happen many times that you may see that your css is being overriding by its parent css.
For example,
HTML file, p1.html CSS file, p1.css
If we don’t add line 22, then by default it will take the padding of the outer div specified outside the media query, so it is important to specify each property that has already been specified before for that element. Like here, if you do not want to use some property but it has already been specified then assign it with value 0.

6. Quick trick for making images responsive
The image will automatically take the size of the screen without adding any separate css for the dimensions of your image.

<img src="car.jpg" style="width:100%;">

Happy enjoying making responsive designs :)