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

Using specific CSS3 media queries

In order to set different styles for each resolution, you can use the CSS3 media queries.

Media queries can be defined directly in the CSS or into an external CSS file. We will discuss the first method, that is, inserting the code inside our style.css located into skin/css.

The following code snippet is an example of a media query, also known as breakpoint:

@media screen and (max-width: 980px) 
  div {
    width: 95%;
  }
}

In this example, all the div elements will have a width of 95% for all the resolutions under 980 pixels, defined by the CSS property max-width. This is a very simple example, but keep in mind that you can play with media queries to have a different design for each resolution and customize your theme as ...

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