Optimizing the theme for multiple devices

Now that you understood how media queries work, let's apply some fix to our theme. In this topic, we will mostly use the default Bootstrap classes to fix minor bugs.

Testing the responsiveness of a website

First, we need a tool to test the responsiveness. There are many tools to test the responsiveness of a website. You can simply resize the browser window or you can test directly on the devices. Alternatively, you can use a great tool called Viewport Resizer.

Viewport Resizer is a responsive design bookmark script created by Malte Wassermann. This script generates a very useful toolbar in your page that allows you to select the device to test and automatically resizes the page you are viewing into an iFrame with the required width.

You can download and save this useful bookmark from the author's website at http://lab.maltewassermann.com/viewport-resizer. It only takes 2 seconds! Simply click on the big button CLICK OR BOOKMARK to save the bookmark as...