O'Reilly logo

Mastering Magento Theme Design by Andrea Saccà

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required