Skip links
How to Make a WordPress Website Responsive How to Make a WordPress Website Responsive How to Make a WordPress Website Responsive Paradigm Marketing and Design
Man using a laptop with WordPress on the screen

Marketing Tips, Insights, and Trends

How to Make a WordPress Website Responsive

Author: Michael Scorcia Category: Web Design Date: October 2, 2020

Man using a laptop with WordPress on the screen

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.

Have questions? Contact us

  • This field is for validation purposes and should be left unchanged.

You may also like

B2B text on a virtual screen with a phone and laptop in the background
Author: Michael Scorcia
Date: September 16, 2021
How to Choose a B2B Website Design Agency The number of businesses operating online is almost innumerable – each attempting to generate sales and stand out among the competition. Your company’s website is a critical component of your overall digital marketing strategy, and having a visually-appealing site that is easy to navigate is an invaluable investment. Some businesses may try to build their [...]... CONTINUE READING
Big B2B text with person icons around and hand holding phone in front of a laptop
Author: Michael Scorcia
Date: September 2, 2021
Choosing the Perfect B2B Ecommerce Solution Ecommerce is a huge part of how consumers use their purchasing power today, and it’s becoming increasingly important as time goes on. However, despite the many benefits associated with using an online platform to manage sales, B2B companies – businesses that market their goods and services to other businesses – have been slower to adapt [...]... CONTINUE READING
Return to top of page
Paradigm Marketing and Design Over the past 7 years, Paradigm Marketing and Design has evolved into a complete turnkey agency, but this award winning shop is still small enough to give clients the individual attention and hands-on, detail oriented services they need to be confident in their marketing effort and competitive in their industries.
330 Changebridge Rd. Suite #101 Pine Brook, NJ 07058, USA
Rachel Phone: 973-250-4995