O'Reilly logo

Magento Responsive Theme Design by Richard Carter

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

Styling images responsively in your Magento theme

One of the most obvious challenges to address in a responsive website is how to handle images in your content. Consider the following screenshot, as viewed on a desktop computer:

Styling images responsively in your Magento theme

The following screenshot shows what happens if your very-wide image is now viewed on a smaller screen, such as a smartphone screen:

Styling images responsively in your Magento theme

Without some CSS to resize the image to the available space, the image will be displayed at its native size. So if the image was 800 x 500 pixels in size and the screen available is 320 pixels wide, ...

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