How To Make Your WordPress Website Responsive

We are awesome at our services and 97% of our customers continue to choose or refer us. We have created
many websites and some of them are listed below

36 +
World widecustomers
7 +
Skilled Experts
6 +
Years Of Experience
87 +
Successfully projects

If you have an existing WordPress Website that you created some years back there are more changes that it is not responsive. i.e The website does not look good in the mobile and tablets available in the market. The Easiest way to convert your website would be to purchase a Responsive Template and add it to your blog but what if you wanted to convert the same theme you have to be mobile friendly wordpress website or tablet friendly wordpress website.

Here is the good news. You can with some effort and some technical CSS knowledge of course.

Here are the steps:

First of all open your website in a Tablet. Review all what is not ok and what needs to be fixed. If you see the website had loaded and has no horizontal scroll bar than most probably your website is responsive. If layout is broken and you need to scroll sideways your theme is not responsive.

Add a viewport in the head tag of your theme that should be in header.php as follows:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This is the most important thing that tells your website the size of the device being used to access it.

Open your style.css of your template and add media queries to handle your content according to the browser/device width used to browse your website. If using iPAD in portrait mode the width is 768px and Landscape width is 1024px

Media Queries to handle iPad for portrait or horizontal view are as follows:

/* iPads (horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : horizontal) {
/* Your CSS goes here */
}

/* iPad (vertical) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Your CSS goes here */
}

In between you can add CSS that will target only for the views hence won’t affect the other views of the website.
Some common CSS that you will be adding here will be resizing the content area to the size of the device so that the content is not overflowing. This should fix majority of issues.

Next if your images on your website content is greater than 768px in case of vertical iPad view and greater than 1024px in case of horizontal view it will be overflowing out of the content. To fix this you need to add css to resize the images only upto the width of the device. max-width:100% of max-width less than the device area works fine to fix this.

Next is the MENU of the website. You will need to decrease the padding of the menu so that it fits up properly in the smaller devices. Alternatively you can also hide the website menu and create a dropdown menu using a select dropdown control for mobile devices.

Similarly use Media Queries for handling other devices like iPhone, Android Devices like Samsung Galaxy, Android Tablets by the resoultion size and create media queries.

If you need to Convert your WordPress Theme to Responsive using our services do Contact Us with your existing website url for a Custom Quote.