As I have already written the importance of optimizing your blog for mobile phones, so I am not going in details again, this post is an outcome of recent modification I did to my own blog, yes, the blog was already optimized for mobile phones, but I was using a plugin for that.
What I did this time is, I made it responsive so that the same theme opens in mobile and adjusts itself according to the size.
Before we start I want to tell you the importance of your time and if you really struggle to devote time to your blog then please do yourself a favour and hire someone to get it done instead of wasting a couple of hours doing this.
If you’ve got plenty of time or staying at home this weekend, and want to improve your blog on your own then read on.
I am not a coder but as I love playing with .CSS, I have gain a bit of knowledge how they work.
Please take backup of your blog. Either, via ftp manager or directly going to file manager from cPanel, or just copy the style.css from theme editor in WordPress. You don’t have to do anything in style.css but keep it anyway.
Step by Step Process
Step 1: Create a new file and name it mobile.css, you are now going to add media queries to it.
Media queries are a way to instruct the browser how to render the page.
Now, every WordPress theme has header, content, sidebar and footer, as main areas that completes a page.
Usually it is something like this.
Now as mobile phone screens are small in size, you may want show everything in a single column, like this.
You will have to use media queries in your mobile.css to make it happen.
Step 2: Put theses codes in header.php to make the browsers use mobile.css.
Step 3: Open mobile.css and put
@media screen and (max-width: 650px) {
}
This tells the browser to use the following values if the screen size it smaller than 650px.
We have to put all the codes between the braces, as mentioned in the image.
Step 4: Now we have to take the .css values from Style.css, as per the images above, we mainly need header, content, sidebar and footer.
Not every theme uses same words for header, content, sidebar, footer, to know what your theme is using, go open header.php find the tag
Let’s assume its header, then go to style.css.
You will find header has some values, like this,
.header
{ width: 950px;
}Copy that and paste it in mobile.css.
Edit the codes to look like this,
.header
{ max-widh: 650 : width: 100%}This will make the header’s width 650px when the browser is resized to 650px. The other value is width: 100% will resize the header when the browser goes narrower.
Step 5: You can find the values for content, sidebar, footer in similar manner and put them in mobile.css like we did.
When you are done with the whole process, the mobile.css will look something like this.
Here is the important thing, your theme many contain more things other than these four elements, like a banner in the header, a third column on the left or right hand side. You have to do the same for each of them, find their tag and put them in mobile.css by specifying a maximum width and a % to the width.
Things you don’t want to show on mobile, you can simply hide them, like if there is a banner in the header, the code in style.cc for the banner would look something like this,
#banner
{float:center;
margin:0;
padding:0;
width:1000px;}You will put code in mobile.css like this,
#banner
{display: none;}Do this to every element you want to hide them in the mobile version of theme.
