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:
1
2
|
@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:
1
2
3
|
@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:
1
2
3
4
5
|
#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {
width:400px;
}
|
The next code sets the main container size:
1
2
3
|
#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:
1
2
3
|
#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:
1
2
3
|
#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:
1
2
3
4
5
6
7
8
9
|
#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):
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:
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):
1
2
3
|
.hentry{
margin-left:-13px;
}
|
That code will make the post content layer positioned 13px to the left.
The next code makes the sidebar hidden:
1
2
3
4
5
6
7
8
9
|
#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:
1
2
3
4
|
#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):
1
2
3
|
#colophon {
width:100%;
}
|
OK, that’s it! Your copy of the TwentyTen theme is now responsive!
Source:- http://colorlabsproject.com/tutorials/make-your-wordpress-theme-responsive/
