Tutorials

Customize our premium WordPress themes and stand out from the crowd.

Make Your WordPress Theme Responsive

http://colorlabs.co/ZmUd6N

641

These days, almost everyone has an internet-viewing device with them, all the time. May it be a tablet or a smartphone, this gadget slips right into our pockets and plays an important role of our daily lives. The whole idea of this so-called smart device is its ability to access the Internet and do virtually every task we would usually do on a full-sized PC while keeping the size small enough to make it light and portable. However, a new problem arises: the web wasn’t made for smartphones. Their screens are too small, so the content of the web is pretty hard to read. If you own a website, you will probably loss a large number of readers just because of this.

Then what to do? The best thing that you can do is make your site become responsive, which, in other words means that the site will adjust itself (its layout and everything) to fit into any screen size. At this tutorial, we will tell you how to make your WordPress theme responsive. Although now nearly all themes in the market are already equipped with responsive design, this tutorial will still help you modify those themes.

At this tutorial, for practice we will use the default WordPress theme, TwentyTen, which does not yet have a responsive design.

If you are new to web programming, a little tool named ‘Element Inspector’ may help you a lot to find the right layers you have to modify. All modern browsers should have it. Mozilla Firefox have had it since v10.0, Internet Explorer since v9. If we have to recommend, we will choose Opera or Google Chrome.

Inspect element process with Opera web browser

To create a responsive design, you just need to modify only one file, style.css.

Firstly, put this code at the very end of your style.css:

@media only screen and (max-width: 480px) {
}

This code is a conditional styling code which will tell the browser that if the screen size is less or equal than 480px, it should do all the styling parameters set in between the brackets. 480px is the maximum screen size of smartphones that exist in the market.

For tablets, you can use 959px. The conditional code will be:

@media only screen and (min-width: 768px) and (max-width: 959px) {

}

For the sake of simplicity, we will only discuss responsive design for smartphone at this tutorial. Once you master this, creating a responsive design for tablets will be just as easy.

After you type the conditional code, put all codes that we have below in between the brackets.

The first code sets the main frame size of TwentyTen to 400px:

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {

width:400px;

}

The next code sets the main container size:

#container {
width:100%;
}

The container layer is set to be 100% which means 100% of the above layer (see the code before, the code is declared as 400px, so container layer width will become 400px since 400px x 100% is still 400px).

The next code hides the the header image of TwentyTen. With this code you can hide or resize the header image:

#branding img {
display:none;
}

The code above sets the header image to be hidden, but if you want to display the image, you will need to resize it:

#branding img {
width:100%
}

At the code above, the width is set to 100% which means 100% x the above layer width (check the first code, the layer width is set to 400px).

The next code hides or re-positions the blog description:

#site-description{
display:none;
}
1
The code above hides the blog description, but if you insist that the description be displayed, just change that code so it looks like this:
1
#site-description{
float:left;
}

The next code sets the navigation bar size (width):

#access{
width:100%;
}

That code is set to 100%, which means 100% x the width of layer above it (see the first code, the width is declared as 400px).

The next code sets the width of the content container. On TwentyTen, this layer wraps the post content layer and also the sidebar layer:

#content{
width:100%;
}

That code is set to 100%, which means 100% x the width of layer above it (see the first code, the width is declared as 400px).

The next code sets the post content layer margin (position):

.hentry{
margin-left:-13px;
}

That code will make the post content layer positioned 13px to the left.

The next code makes the sidebar hidden:

#primary{
display:none;
}

This one resizes the footer section:</pre>
<blockquote>
#footer{
width:100%;
}

With this code you will only resize the main layer of footer, not its content.

The next code re-positions the WordPress credit text:

#site-generator {
float:left;
margin-top:5px;
}

And the last code sets the width of the footer border (if you check the TwentyTen theme, you will notice there is a black border at the footer):

#colophon {
width:100%;
}

OK, that’s it! Your copy of the TwentyTen theme is now responsive!

  • Fesada

    Nice tutorial. May i know why you fid not make the theme in this site responsive?

  • http://www.mathewporter.co.uk/ Matt Porter

    Nice little tutorial for those using the default theme, but transferable for any aslong as people take into consideration using % values on the content within any containers.

  • C.

    Great article, thank you! Would be even better if it had a live demo to go with it. ;)

  • http://www.geekdashboard.com/ Amar Ilindra

    I’ll be more awesome if you provide us a demo link
    Thanks for awesome tutorial

  • test

    test

  • Nad101

    Nice Tut.. but can you make a video on how to make it…… please.. it is easy to understand if the’res a vid… Thanks in Advance..

    Finally find Another awesome site

  • http://www.wordpressfamily.com/ WordPressFamily.com

    great tutorial

  • http://www.ahlifikir.com/ Barzrul

    Wow, great tutorial. Thanks for sharing.

  • Lito

    Well done Christian, you saved me because I had a responsive theme with a custom logo and with your tutorial it has been fixed.

  • Kirsten Gouthier

    Hi there, can this be added on a different theme style not just the theme above?

    • Desi Natalia

      Hi, Yes you can added this on a different theme style not just the theme above. Thanks!

  • Rina

    Can this be done in a child style.css?

  • Arelli

    amazing tutorial could you do it in video, that would be awesome!…thank you for your time!

  • Franz

    Awesome :D Thx a lot… that was the missing hint to me

  • Adrian

    Splendid Tutorial! I have just edited my favorite theme to become responsive theme. Thanks!

  • silicon28

    The CSS modifications here work. But it still won’t work on Android devices unless you double check and add (if needed) the following meta tags into the header.php file.

    Once they are included, it works like a charm.

  • Scott

    Thank you for this. So for the Decode theme, I tried to follow the instructions and put this code in CSS Stylesheet editor, but it simply gave me a blank screen on the phone. Any idea what I might be doing wrong?

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

    #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {

    width: 400px;

    }

    #container {

    width: 100%;

    }

    #branding img {

    width: 100%;

    }

    #site-description {

    float: left;

    }

    #access {

    width: 100%;

    }

    #content {

    width: 100%;

    }

    .hentry {

    margin-left: -13px;

    }

    #primary {

    display: none;

    }

    #footer {

    width: 100%;

    }

    #site-generator {

    float: left;

    margin-top: 5px;

    }

    }