WordPress structure

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.
THE domain at THE price! $.99 .Com Domains from GoDaddy!

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.

If you want to see a real example of a non-responsive WordPress theme that I made responsive, check out http://disablemycable.com/blog. The CSS file shows these techniques.

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



34 thoughts on “Make Any WordPress Theme Responsive (Mobile-Friendly)

  1. 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.

  2. 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.

    1. 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

  3. 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..

  4. 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?

    1. Hi Agostians,

      I see that your popup has fixed width. You’ll have to change this to percentage-based width. Basically, apply the techniques above to your popup and popup images.

      Thanks,
      Brian

        1. I just tried it using the Chrome inspector and it worked. I set the width to 50% and the background image to “contain”. However, there are other problems. The input form isn’t scaling, among other things. That would have to be dealt with separately. – Brian

  5. 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

    1. Hi Craig,

      Thank you for sharing your inspiring story! So glad these techniques worked for you.

      And thanks for the tip on the jQuery plugin! I’ll have to check that out.

      Sincerely,
      Brian

  6. 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!

  7. 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!

  8. 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 =)

    1. Hi Wolf,

      Thanks for your comment and best of luck! You don’t need to know PHP, but you actually do have to be pretty good at CSS to do this… Let us know how it goes. Just remember to make a good backup before starting.

      Thanks,
      Brian

  9. 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!!!!!

  10. I’m having some issues with converting http://www.palmettoprimarycare.com/find-a-location/ to mobile… It looks fine when using the “Desktop Version” on my phone, but utilizing WPTouch Pro and viewing it as a mobile version (even adjusting widths to be % and max width px) didn’t seem to help that much. This is probably a specific problem.

    Great article… if you have any assistance to offer in my weird scenario… let me know.

    1. Hi Jonathan,

      Thank you for your comments. Sorry to hear you’re having problems. I’ve never personally used WP Touch Pro, but people have told me that those mobile plugins never really do exactly what you want them to (I think it’s almost impossible to get what you want without manual tweaking).

      Regarding changing the widths to %’s, the problem might be that there are elements within those divs that have fixed width, such as images or nested divs, which might be “pushing against” the div and preventing it from shrinking. You’ll have to look for those and change those to percentages as well. That is one thing to check, at least.

      Before even viewing on a phone, I usually just shrink my desktop browser manually to see how things are collapsing. Sometimes that gives you insight as to why things aren’t shrinking the way you want.

      Hope this was helpful..
      Thanks,
      Brian

  11. Can u help me, my site is not mobile friendly, how to fix css the following:
    /*
    Theme Name: wp-wedding
    Theme URI: http://www.xhtmlvalid.com/2008/03/20/wp-wedding/
    Author: XHTMLValid.com
    Description: Find more free themes at XHTMLValid.com
    Version: 0.1
    Author URI: http://www.xhtmlvalid.com/
    */
    body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;margin:0px;padding:0;background:url(‘images/bg.jpg’) repeat-x;background-color:#F8DCE8;}
    img {margin: 0px; padding:0px;border:0px;}
    #mainpage {background-color:#F8DCE8;width:1000px;margin:0 auto;overflow:hidden;}
    h2 {font: 24px Tahoma;color:#000000;margin:0;padding:0;}
    h3 {font: 24px Tahoma;color:#000000;margin:0;padding:0;}
    a:link, a:visited, a:active{color:#383434;text-decoration:none;font-weight:bold;}
    a:hover{text-decoration:underline;}
    input {border:1px solid #303030;vertical-align: middle;}
    #menu {height:40px;width:1000px;float:left;background:url(‘images/menubg.jpg’) repeat-x;}
    ul.menu{width:992px;height:40px;float:left;list-style:none;margin:0px;padding:0;background:url(‘images/menubg.jpg’) no-repeat;padding-left:8px;}
    ul.menu li{float:left;list-style-type:none;margin:0;background:url(‘images/divider.jpg’) no-repeat;background-position: 100% 0%;}
    ul.menu li a {float:left;font:13px Verdana;color:#FFFFFF;text-transform:uppercase;line-height:40px;padding-left:15px;padding-right:15px;font-weight:bold;}
    ul.menu li a:hover {text-decoration:underline;}
    ul.menu li:hover {}
    #header{float:left;height:200px;width:1000px;padding:0;background:url(‘images/headerbg.jpg’) no-repeat;margin:0px;padding:0px;}
    #header h1 {margin:0px;font:50px Georgia;color:#FFFFFF;text-align:right;font-style:italic;padding-top:20px;}
    #header h1 a {font-weight:normal;color:#FFFFFF;}
    #header h1 a:hover {text-decoration:none;}
    #header h2 {margin:0px;font:14px Arial;color:#FFFFFF;text-align:right;padding-top:5px;font-style:italic;}
    .input {border:0px;height:18px;width:100px;border:1px solid #A8ACB0;font:14px Arial, Helvetica, sans-serif;font-weight:normal;color:#383434;background:#FFFFFF;}
    .submit {border:0px;height:22px;width:60px;}
    #searchform {padding:0px;margin:0px;padding-bottom:5px;}
    #content{font: 12px Arial, Helvetica, sans-serif;color:#383434;float:left;width:520px;margin:0px;padding:0;overflow:hidden;padding-left:25px;padding-right:25px;padding-top:11px;}
    .entry{float:left;width:520px;margin:0px;padding:0px;}
    .entry a {color:#383434;}
    .entry h2, h3{font: 24px Arial, Helvetica, sans-serif;color:#E00470;margin:0px;padding:0;}
    .entry h2 a {text-decoration:none;color:#E00470;margin:0;font-weight:bold;}
    .entry h2 a:hover{text-decoration:none;}
    .entry h3 a {text-decoration:none;color:#E00470;margin:0;font-weight:bold;}
    .entry h3 a:hover{text-decoration:none;}
    .entry h4, h3{font: 12px Arial, Helvetica, sans-serif;color:#303030;margin:0px;padding:0;}
    .entry h4 a {text-decoration:none;color:#303030;margin:0;font-weight:normal;}
    #sidebar{float:left;width:205px;margin:0px;padding:0px;font:11px Verdana;overflow:hidden;padding-left:10px;}
    #sidebar2{float:left;width:205px;margin:0px;padding:0px;font:11px Verdana;overflow:hidden;padding-right:10px;}
    .rsidebar{font: 13px Verdana;color:#303030;float:left;width:205px;}
    .rsidebar h2{margin:0px;font:17px Arial, Helvetica, sans-serif;color:#FFFFFF;font-weight:bold;background:url(‘images/menucat.jpg’) no-repeat;line-height:28px;padding-left:10px;border-bottom:1px solid #FFFFFF;}
    .rsidebar a {font-weight:normal;}
    .rsidebar ul{list-style-type:none;margin:0;padding:0;background:#F8F0F0;}
    .rsidebar ul li{list-style-type:none;margin:0 0 0px;padding:0;padding-left:0px;padding-top:11px;border-bottom:3px solid #E8C0D0;}
    .rsidebar ul li ul{list-style-type:none;margin:0;padding:0 0px;}
    .rsidebar ul li ul li{list-style-type:none;border:0px none;padding:0px;margin:0px;border-bottom:1px solid #FFFFFF;background:#F8F0F0;padding-left:15px;padding-right:15px;line-height:26px;}
    .rsidebar ul li ul li a {font:14px Arial, Helvetica, sans-serif;font-weight:normal;color:#E00470;}
    .navigation{float:left;color:#303030;width:636px;margin:0px;padding:0px;margin-left:13px;margin-right:19px;padding-top:6px;}
    option.level-0 {
    font-weight: bold;
    }
    .navigation p {color:#ff0000;margin:0px;}
    .navigation a:hover {text-decoration:underline;}
    .alignright{float:right;margin-top:10px;}
    .alignleft{float:left;margin-top:10px;}
    .postmetadata{text-align:right;font: 12px Arial;color:#383434;margin:0;padding:0px;padding-bottom:10px;}
    .postmetadata a {color:#383434;font-weight:normal;}
    .boxcomments{width:463px;}
    #commentform label{display:block;margin:0;}
    #commentform input{width:170px;margin:0 5px 10px 0;padding:1px;}
    #commentform textarea{width:400px;margin:0 0 10px;padding:0;}
    #commentform #submit{margin:0 0 0px;}
    #commentform p{margin:0px 0;}
    ol.commentlist{margin:0 0 1px;padding:0;}
    ol.commentlist li{display:block;list-style:none;margin:0;padding:0px 0px 1px;}
    ol.commentlist li :hover{background:none;}
    ol.commentlist li.commenthead{display:block;list-style:none;margin:0;padding:0px;}
    ol.commentlist li.commenthead h2{margin:0;}
    ol.tblist{border-top:1px solid #fff;list-style:none;margin:0 0 1px;padding:15px;}
    ol.tblist li{display:block;padding-left:15px;list-style-type:none; margin-left:0; margin-right:0; margin-top:0; margin-bottom:5px}
    #footer{color:#FFFFFF;clear:both;height:0px;margin:0;padding:0;}
    #footerbox{color:#FFFFFF;margin:0;padding:0;width:1000px;height:153px;margin:0 auto;background:url(‘images/footerbg.jpg’) repeat-x;}
    #footerbox p {color:#FFFFFF;margin:0px;font:14px Arial, Helvetica, sans-serif;margin-top:0px;text-align:center;padding-top:90px;line-height:63px;}
    #footerbox a {color:#FFFFFF;font-weight:normal;}

    0 ) {
    location.href = “/?cat=”+dropdown.options[dropdown.selectedIndex].value;
    }
    }
    dropdown.onchange = onCatChange;
    –>

Leave a Comment or Ask a Question

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