Give your website a responsive makeover in 4 easy steps

A responsive website means that your design adapts to whichever device a user is browsing your website in.

By applying responsive design principles, you are ensuring your site will be able to work well on different screen sizes, so more people can access your content. Given that a good amount of your users would be very likely to browse you from their phones, it's important to keep this in consideration.

Here's some quick tips that you can apply to your project to make it responsive:

Use media queries

A media query consists of a media type, if that type matches the type of device the document is being displayed on, the styles are applied. How do I do this? Easy as following this syntax:
@media(max-min width:100px){
Your CSS rules go here}

Make sure your images also get the responsiveness memo

Instead of applying an absolute width to an element (i.e. width:70px), it's better to use something like this:
.img{
Max-width: 100%;
Display: block;
Height: auto;}

Here, max width scales to fit image without stretching it and height in auto keeps the original ratio aspect.

For higher resolution displays, use retina image

The simplest way to do this is to define their width and height as half of the original.
.img{
Height: 250px;
Width: 250px;}
<img src="linkpic500x500" alt="image">

Take care of your typography

Instead of using px or em units, switch to viewport units. Viewport units are relative to the viewport dimensions (width/height) of a device and percentages are relative to the size of the parent container elements.
For example:
.div{
Font-size: 10 vw; ->10% viewport width
3 vh; -> 3% viewport height;
Vmin: 70 vmin; -> 70% of viewport's smaller dimension
Vmax: 100 vmax; ->100% of viewport's bigger dimension

Applying these tips, your website will render in any device without problems, congratulations!