How to Make a WordPress Website Responsive

There’s no such thing anymore as a “standard” screen size. We’ve got desktops, laptops, tablets, smartphones – all of varying sizes, even within each category. The list of potential display ratios is endless, which makes the scalability of a responsive website an absolute must for optimizing the end user experience. In this article, we’ll share with you some of our top broad-level tips on how to make a WordPress website responsive.

But, actually, before we go too in depth into how to make a WordPress site responsive, let’s start with the basics.

What is a responsive WordPress theme?

In WordPress, your theme is the collection of templates and stylesheets that are used to define the appearance and display of your website. More specifically, a responsive theme is one that utilizes:

• A fluid site grid with proportionate, rather than fixed, measures
• Flexible images
• Design changes that ensure usability on mobile/non-desktop devices
• CSS media queries to define breakpoints for design changes

So, are WordPress sites responsive? Yes, and no. Some are, some aren’t. Ultimately, whether your website is responsive or not depends entirely on the theme you have chosen. (Realistically, these days it’s quite rare to find a theme that’s not responsive!)

But if you’ve already built a WordPress website with a static theme, don’t panic. We have good news: It is still possible to make your WordPress site responsive – without having to design a whole new site. As you would probably imagine, however, knowing how to make a WordPress website responsive is a fairly technical process that requires a good bit of coding knowledge.

How to make a WordPress site responsive by converting your static site

As with any job, to get it done right, you’ll need to have the proper tools at your disposal. For this task, we recommend three in particular:

1. 1. A development tool, like Firebug, Chrome Developer Tools, or Firefox Developer Tools, which allows you to check your site’s HTML and CSS structure
2. A basic text editing program (think Microsoft Word, Google Docs, etc.)
3. A local development environment where you can house your site while you experiment with it, without disrupting your current site

From there, the coding begins. If the thought of that intimidates you, you can reach out to us at any time. We’re here to help. But if you think you’re ready to tackle it, here’s how to make your website responsive in WordPress:

Step 1: In the header of your site, paste in the following line of code, which will tell browsers to display your pages based on the device width, rather than one global width.

Step 2: Navigate to the containers for the main section of your site and set fluid element widths and heights for the following elements: body, wrapper, header, menu, main content, sidebar and footer. Let’s take the wrapper, for example. If you see this inside your stylesheet…

#wrapper {
width: 900px
}

…you’ll want to change it to the revised code below, and apply the same scheme to each element.

#wrapper {
max-width: 900px;
width: 100%
}

When you set the width to 100%, it tells the element that it can use as much horizontal space as it needs, up to 900 pixels wide.

Step 3: Allow your images to automatically scale according to screen size by adding the following code to your style.css:
img {
height: auto;
max-width: 100%;
}

Step 4: Define your break points, which are the cutoff points at which the website will automatically adjust the layout and design so that the site continues to display optimally on the given screen size.

Step 5: Create a mobile menu, which you can do by downloading one of the many WP plugins that are designed to do exactly this. Typically, they condense your main navigation into a collapsible list that’s easy for mobile users to manipulate on a smaller screen.

There are lots of other things you can do too, like altering fonts or hiding certain elements on smaller screens, although those types of “extras” aren’t necessarily required for how to make a website responsive in WordPress. Still, once you have made the updates outlined in the five steps above, it is recommended to test out your newly responsive site on as many different devices and screen sizes as possible to ensure everything functions properly and that additional tweaks aren’t needed.

Building a responsive WordPress site from scratch

There are two options for how to make a WordPress site responsive when you’re starting new: you can either choose an existing WordPress responsive layout and input your content to fit the theme, or you can go completely custom and create a responsive WordPress theme from scratch.

Because there are so many responsive WordPress themes already available, it’s likely that you’ll be able to find one that fits your needs. Going this route is the simplest way for how to make a website responsive in WordPress and is a great option for any budget – whether you’re building the site yourself, or you’re hiring someone to build it for you. Hiring a developer to create a responsive WordPress theme from scratch is much more involved but is a great option for anyone who requires specialty features that may not be available within a standard theme.

For more help on how to make a WordPress site responsive, contact us today. One of our team members will be in touch.