Make a WordPress Theme Responsive

Published on : April 9, 2015

Author:

Category: Wordpress


Many of us faces problem with the old WordPress themes. Because they are not mobile or tab friendly. There are many ways to make a site responsive. Popular ways are like using mobile jQuery is the best. But i will share some idea that i have done while making  a site responsive.

1. Select the break point of the site by using the browsers responsive simulator. It will help to lessen your code for the media query.

If you know the break point once  you can start your query from that size.

2. Make all the images responsive by using the below code. Images play a vital role in your site.


img { display: block; max-width: 100%; width: 100%; height: auto; }

3. Target the most used devices that are used most. If you can make it through your site will fit in most of the devices.

4. For WordPress don't use or edit the theme's core  files. Always create a child theme for the the and edit the files on that theme.

Because if you edit a theme file, all your settings may wiped while the theme update to another version.

5. Use % instead of using the px value . % fits to the screen of any device easily.