In a nutshell, making a responsive website just requires the use of Media Queries. With additional CSS to overwrite default styles, you can create fully mobile friendly websites.

What are Media Queries?

You can think of Media Queries as a test to check for a true or false result. Depending on a number of factors, one being the browser window width, you can add additional CSS properties to overwrite the default styles that would better suit your design in any given width.

For example, in the following code, you’re testing to see if the browser window is below 600px and if it is, apply CSS properties within the brackets.

@media screen and (max-width:600px){
   /* YOUR STYLES HERE */
}

Here’s my video detailing how to use Media Queries to create responsive websites.