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 you want.

As we said before, we have four main scenarios; for each of them, we can use a media query, and write inside them the code that we need to customize the theme.

Now, let's discuss the main media queries that we are going to use into...