Make Any WordPress Theme Responsive (Mobile-Friendly)

Here is the scenario: You’ve searched high and low and found the perfect WordPress theme for yourself or your client. But, there’s one big problem: it’s not mobile-friendly. With mobile web traffic soon expected to exceed desktop web traffic, being mobile-friendly is critical.

I often have to go through the exercise of converting a non mobile-friendly WordPress theme to be mobile-friendly, or “responsive” (the term used to describe a site that uses the size of the browser to reconfigure itself for optimum viewing). In this article, I’ll guide you through the process I use.

Note, I am assuming you are familiar with HTML and CSS here. I’ll give you some broad strokes, along with some detailed code, but of course much of the work will depend on the inner workings of your theme. Hopefully, you can use some of the principles I talk about for your project.

Let’s look at one of the most common layouts for a WordPress theme, namely, one with a header, menu bar, main content section, sidebar, and footer. Here is a graphic depiction of this structure:

WordPress structure

Making the Header Fluid

The first thing to do is make all of the elements “fluid” or variable-width.  Ironically, in the early days of web development, everyone made containers fluid.  When we discovered that this made things hard to control, we went to fixed size containers.  And now we’re back to making everything fluid again!

Anyway, you need to find the main containers (divs) for the major sections of your site, as indicated in my diagram above.  An easy way to do this is to use the Firebug Firefox plugin or Google Chrome.  If you install it, you can hit F12 or CTRL-SHIFT-I (or ALT-CMD-I on a Mac) and it will tell you the name of all of the containers surrounding any element you click on.  It’s super-useful for this type of work.

For example, your header might be contained in a div like this:

<div id=”header”>
  (bunch of HTML here)
</div>

Next, look at the CSS for that div.  It might look something like this:

#header {
  width: 900px;
  (more properties here)
}

To make this element fluid, remove the fixed with and change it to look like this:

#header {
  max-width: 900px;
  width: 100%
  (more properties here)
}

Your header should now be fluid.  The magic is accomplished by defining the width using a percentage instead of fixed pixels.  The “max-width” property prevents it from getting too big.  If you want, you can add a “min-width” if you want to prevent the window from getting too small.  I generally use a value of 300px for my min width.

Re-size the browser to see if it worked!  If not, there might be elements inside the header that are keeping it from shrinking.  Search for any fixed-width CSS definitions.  You’ll have to change them to be variable using percentage-based widths.  I’ll describe how to do that by showing you how to resize the main content block and sidebar.  Other problems in the header, like the text being too big, will be fixed later with media queries.

As elements wrap, the containers will need to get taller.  Remove any heights that are set in pixels so they can expand as needed.

If your header still isn’t fluid, it might be inside a container that has fixed width.  Use the tools to search for those, and make them fluid.

Content Block and Sidebar

Let’s assume your main content and sidebar containers look like this:

<div id=”wrapper”>

  <div id=”content”>
    (bunch of HTML here)
  </div>

  <div id=”sidebar”>
    (bunch of HTML here)
  </div>

</div>

Let’s say the corresponding CSS looks like this:

#wrapper {
  width: 900px;
  (more properties here)
}

#content {
  width: 600px;
  (more properties here)
}

#sidebar {
  width: 300px;
  (more properties here)
}

Now, the numbers might not exactly add up to 900 due to padding and so forth, but for simplicity, let’s say they do.

As we re-size the browser, we want to maintain the ratio of the container and sidebar widths.  Here’s how we accomplish that:

#wrapper {
  max-width: 900px;
  width: 100%;
  (more properties here)
}

#content {
  max-width: 600px;
  width: 66.7%;             /* 600/900 = 66.7% */
  (more properties here)
}

#sidebar {
  max-width: 300px;
  width: 33.3%;             /* 300/900 = 33.3% */
  (more properties here)
}

Basically, you need to work out the ratio of the contained elements to the width of the containing element, and set your width equal to that percentage.

If you want to add padding or margin, express those as percentages as well, and adjust the other widths accordingly so the total is always 100% or less. This is really key. The widths of all of the elements that take up horizontal space need to be expressed in percentages. Note that you can use max-width to prevent things from getting too big.

If the elements are not re-sizing, look for absolutely-sized elements within those divs.  Convert those widths, margins, and padding to percentages as well.

Let’s say there is a div within #content called #single-post with width 550px and 25px margins on either side.  The CSS for that would look like

#single-post {
  max-width: 92%;    /* 550/600 = 92% */
  margin-left: 4%;   /* 25/600 = 4% */
  margin-right: 4%;
  (more properties here)
}

Since this div is contained in another div, the horizontal widths should total 100%, not 66.7%.

Use this technique if your header is not re-sizing.  Repeat the same process that you used on the header with your footer.  If anything isn’t re-sizing, check for any fixed-width contained elements.

The Menu Bar

OK, now all of the elements on the site should be resizing nicely as you adjust the width of the browser window… except for the menu bar.  The menu bar can be tricky, since it can be implemented in a variety of ways.

The easiest way to deal with the shrinking window is to simply have the menu “double-back” on itself and wrap.  We’re not going to hide the main menu with a button in this case.  Here are some screen shots to show what I’m talking about.  First we have the desktop version.

Desktop Configuration

Here is the mobile version.  Notice how the menu bar just folds back on itself.  We are not doing a fancy menu button here, but it’s still very usable, and less work.

Mobile configuration

Okay, since the structure of menu bars can vary widely, I’m going to do some hand-waving and give you some broad brush strokes here.  It’s impossible to give a step-by-step method that will work in all cases, unfortunately.  Here’s the general idea though.

First, replace any widths defined in pixels using the techniques above.  That alone is probably not enough.  Menu bars often have fixed height, so you’ll have to replace any heights defined in pixels with “min-height” along with “height: 100%”, or something to that effect.

In my case, this only partially worked.  The menu wrapped in a weird way until I added “display: inline-block” to the div containing the menu items.  After I did that, the menu was no longer centered, so I had to wrap it in a new div which was centered.

After all of the hoopla, my menu was centered and wrapped when I made the browser narrow, but it took me over an hour of experimentation to figure out.  More fancy solutions, like a menu that collapses into a Menu Button (sometimes known as a “hamburger”) require JavaScript or jQuery… I reserve that for a future article.

Resizing Images

Okay, hopefully your containers are now resizing, but what about the images? Chances are they were hard coded with dimensions like this:

<img width=500 height=150 src="images/image.jpg />

To make them resize properly, the technique is similar to resizing divs.  Remove the hard-coded width and height from the images and replace them with “width:100%;” and “max-width:” set to whatever you want the normal desktop size to be.  The result is this:

<img style="width:100%; max-width:500px;" src="images/image.jpg />

Images set up this way will shrink down when you resize the browser window.

Media Queries

OK, now we have a completely fluid layout that resizes as you make the browser window narrow.  But, it still looks terrible on a thin mobile device screen because the elements are too scrunched up.  We need to separate them so that only one column of content is visible at a time.  In addition, your header probably looks bad, and we’ll have to fix that too.

These problems can be fixed through the use of media queries in your CSS file.  Let’s fix the main content container and sidebar first.  Play with the browser size and determine roughly at what point you want the sidebar to hop below (or above) your main content.  Estimate or measure in pixels how wide the browser window is at that point.  For me, it was at 540 pixels.

Next, we have to “undo” the widths we defined for the content and sidebar to make them fill the whole width of the screen as follows:

@media screen and (max-width: 540px) {
#sidebar {
  display: block;
  min-width: 200px;
  max-width: 400px;
  margin: 0px 3%;
  float: none;
  width: 94%;
  }

  #content {
  width: 94%;
  margin:0px 3%;
  }
}

The key is making the widths 100% (or 94% in my case, with 3% margin on each side).  Experiment with these settings until  you get what you want.

The Header

We are almost there.  The header probably still looks bad when you make the browser really thin.  For example, the font size might be too big and it might wrap or do other unpleasant things.  This is simple to fix.  Let’s say the original font size was 36px, which is too big when the screen is narrow.  Pick a point where you want to resize it, and add the code below.  For me, the break point was at 400px wide, where I resized the header text to 28 pixels as follows:

@media screen and (max-width: 400px) {

  .blogname h1 {
    font-size: 28px;
  }

}

The Final Bit

I’ve undoubtedly glossed over many of the little details in your theme that you will need to fix to make it completely responsive. But hopefully with the broad strokes I’ve given you, you’ll be able to fill in the details.

But even after you get your site fully responsive, you might be surprised to still see a shruk-down version of the non-responsive site when you view it on a phone!  What gives?

You have to add one last line of code to tell the phone not to “zoom out” when viewing your site.  It’s easy.  Just add this line to the head section of your HTML code:

<meta name="viewport" content="width=device-width, initial-scale=1" />

This tells the phone’s browser not to zoom out when viewing your page.  Everything should be kosher now.

Hope this has helped!!  Let me know how it works for you. – Brian

Shares

Please Leave a Question or Comment

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

36 Comments
Inline Feedbacks
View all comments
William
2 years ago

Thanks for the information but I have to optimize my own theme in such a way that it will be mobile-friendly but still yet I don’t get the full percent.
Must someone use those mobile-friendly themes that are not even nice when looking at it?

-William Stanaland

cam
cam
7 years ago

thanks. very helpful.

Komang
7 years ago

Nice tutorial

Andrea
Andrea
7 years ago

You don’t have any contact information on your site to inquire about your services why is that? I am interested but your website has zero information about how to get in touch.

Lou
Lou
8 years ago

Great post! I own Yoebo and thought restructuring would be a nightmare but you’ve broke it down pretty well. I’ve got so much padding and margins though so that will be a problem.

WallPaper WordPress theme

Though a great article but you are missing a lots of point that is too much crucial to convert any theme into mobile friendly theme. Like you have not mentioned how to convert any existing menu system into mobile friendly menu . Thus in my opinion all the hardwork will have no ultimate impact on the readers.

Brian Shim
9 years ago

Hi,

Thanks for your comments. Yeah, as I mentioned, I skipped a lot of the details about menus because there are so many different kinds. One could write a whole article or whole book on mobile navigation. Until I write an update, the menus are mostly left as “an exercise for the reader” using the other principles I’ve mentioned.

Thanks,
Brian

swasuk
10 years ago

Great article Brian, I have been fixing different elements in sites for a while, most are mobile responsive already, but as you at new divs you have to amend them to match as well. I have one website I look after for a client that is not mobile friendly, so I will refer to this article, if I ever need to fix it up..

agostians
10 years ago

Thank You so much,it helps a lot. I have a question what to do to fix popup images with the combination of two images. I am referring to http://www.puttinout.com , How can we make a responsive popup. Do we have to install separate popup for cell phones or do we have ways to f this popup?

agostians
10 years ago
Reply to  Brian Shim

I tried it too but it’s still the same:(

Craig Steeland
Craig Steeland
10 years ago

Very, very helpful and useful post. I have a very complex custom WordPress site which I have been wanting to make responsive. Using any of the ‘off the shelf’ responsive themes would have meant coding the site from scratch. Your advice has encouraged me to make the changes myself on the existing theme.

My styles CSS file has 3,000 lines, so it took some trial and error to get it right! I also had to edit 8 PHP files. After several days of work, it is all done. The website looks great on phones, tablets and desktop PCs.

Your tips make it possible to figure out how to make any aspect of a website responsive, including fonts, colours, backgrounds, etc. I can recommend the use of the jQuery Responsive Select Menu plugin. This worked very well as a means to convert my top menu to a drop-down list. It seamlessly worked with the other changes I made to the style sheet.

Thanks very much for sharing this advice. Very kind of you!

Craig

Kyle Pearce
10 years ago

Thanks for the post. I thought I was going to have to go to a completely new theme that was responsive and lose all of my customizations I’ve made along the way!

Very helpful! Only took an “occasional coder” about 2 hours total to get it done including all trouble-shooting along the way.

Cheers!

Goalshunter
10 years ago

Great info buddy ….. will work it …………..

Joanna
10 years ago

It looks so easy now! I will try fixing my website in the weekend and I hope it is as easy as it looks :) Thank you for your time and valuable information!

Dipender SIngh
10 years ago

Hi, Its truly a good article. I have never tried this but hope this will work. I will definitely try your percentage tricks this week.

Thanks again to share this concept.

Wolf
10 years ago

Sound doable, so I’ll give it a try next weekend.
I had been looking for a good and matching responsive theme, but ain’t found one. So I’ll try getting mine responsive…wish me luck, I don’t know much about css and php.
I let you know how easy or hard it is for someone like me =)

RJ
RJ
10 years ago

Nicely explained, Brian.

Thank you for taking the time to share this with all of us.

~RJ

Anonymous
Anonymous
10 years ago

Thank you so much for this helpful article! You provided just the information I needed to fix an issue I had no idea how to fix and it took me less than 5 minutes! Thanks so much for sharing!!!!!