How to create existing WordPress theme responsive in few easy steps

Raisse

As you know WordPress is most common platform to create website and use of portable devices are growing day by day so the demand of responsive WordPress themes are also high. Most website owners love their old design and therefore they want to create existing WordPress theme responsive.

What is responsive design?
In my word, the design which looks perfectly and accordingly in all devices called responsive theme.

Now let’s look on how you can create existing WordPress theme responsive.

To learn this we will take the example of Twenty Ten theme.

Usually the max screen size of smartphone is 480px and tablets max size is 959px. If you open unresponsive site in your mobile, it look like the below image.

So Let’s make the changes for smartphone first. What we need to do here? Nothing but only need to add css styling for smartphone under conditional code at the end of the css file.

The conditional code for Smartphone size 480px will be:

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

Now we will add styling inside the brackets of conditional code to adjust the theme for this size.

So the first styling code will be for the main frame (Wrapper).

#wrapper
{
width:400px;
}

This code will set overall page to 400px. This frame size is important because other styling will follow this size.

Now come to the first visible part of the page - Header. So how can you make the header according to this size (400px)? Take a Look on the code below.

#site-title, #site-description, #branding, #branding img
{
width: 100%;
}

It is simple to understand that site title, site description and header image will become according to the size of above layer (400px).

And for navigation, same rule will apply.

#access, div.menu
{
width: 100%
}

Now let’s look on middle portion, it contains two parts, first part for post/article and second for sidebar.

Here we need to change the size of container according to the above layer.

#main
{
width:100%;
}

Again follow the same rule here and resize the content/post part to 100% of 400px so it will look in full width.

#content
{
width:100%;
}

Now look at the following code it will move the content layer to 13px left.

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

When we resize the post area to 100% we can see the sidebar widgets over the post. To make it correct we need to change the sidebar width.

#primary
{
width:100%;
}

And css for footer will be.

#colophon, #site-info, #site-generator
{
width:100%;
}

Now see the complete code. You can copy and paste this code inside the style.css file.

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

#wrapper
{
400px;
}

#site-title, #site-description, #branding, #branding img, #access, div.menu, #main, #content, #primary, #colophon, # site-info, #site-generator
{
width:100%;
}

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

}

Final look.

By observing the above it is clear that we only need to make the frame size according to the device, and then change other elements of theme according to that size.

If you got the above points then it will be easy to make the theme responsive for tablets. Let’s take a look on css for tablets.

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

#wrapper
{
959px;
}

#site-title, #site-description, #branding, #branding img, #access, div.menu, #main, #content, #primary, #colophon, # site-info, #site-generator
{
width:100%;
}

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

}

You can use desktop browser to check your layout by stretching and shrinking but when you will check it on real device it won’t work, checkout the reason here www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml. To make the above code work, you need to add below Meta tag in between the head section.

That's all.

Web Techno Crazy

How to create existing WordPress theme responsive in few easy steps

Raisse

0 Comment