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

Adding the media queries to your Magento theme

So, the basics of your responsive Magento theme are up and running, but to get your layout to change based on the screen width available, you will need to add CSS media queries to target browsers with specific viewport widths.

Tip

For some background reading on CSS media queries, see Mozilla's Developer guide at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.

A basic media query can be seen in the following code:

@media only screen and (min-width: 50em)
{
  body {background: red}
}

You are simply telling the browser to apply any CSS enclosed in the store if the media query is matched; in this case, to turn the background of the <body> element red if the viewport (space available within ...

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