WordPress / Web Development Tutorials
(Best WordPress Tutorials)

Silva Web Designs - Blog

How to make an existing website responsive

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.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion