Do you already have a website but the design is not responsive? Well, it’s never too late to make the layout responsive and get modernise your website to make it compatible across all devices.

In-order, to make it responsive you will need to spend at least an hour or two re-writing the CSS. Here is a quick guide to get started using the mobile-first approach.

@media only screen and (max-width: 640px) 
{ Your: #CSS here; }

@media only screen and (min-width: 641px) 
{ Your: #CSS here; }

@media only screen and (min-width: 641px) and (max-width: 1024px) 
{ Your: #CSS here; }

@media only screen and (min-width: 1025px) 
{ Your: #CSS here; }

@media only screen and (min-width: 1025px) and (max-width: 1440px) 
{ Your: #CSS here; }

@media only screen and (min-width: 1441px) 
{ Your: #CSS here; }

@media only screen and (min-width: 1441px) and (max-width: 1920px) 
{ Your: #CSS here; }

@media only screen and (min-width: 1921px) 
{ Your: #CSS here; }

The code above could be considered a standard for responsive design. All you need to do is paste this chunk of code right at the bottom of your styles.css and the CSS fixes for each breakpoint. Alternatively, we like to create a responsive.css file so it is separate from the core CSS file (styles.css). This will take a bit of trial and error to get it right but using the Google Chrome Inspector makes the process a lot easier!

If you need any help with this, drop us an email at [email protected].

We hope you found this article helpful. Thanks for reading.