Skip to content


Subversion checkout URL

You can clone with
Download ZIP
CSS3 Media queries boilerplate
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example media queries boilerplate
README Update master
media_queries.css media queries boilerplate


Recently, during many projects I have been working on cross-device optimisation but never on a project that supported standard web and new devices (iOS & Android based mobile phones & tablets). Finally the day had come when I have encountered this problem.

I did a quick research and I haven’t found any satisfactory solution that was ready to download and use. That’s why I have developed my own template which helps me in creating responsive layouts. It has been tested on a couple of projects and I think the code is mature enough to be shared.

Small tip: The most important thing about responsive design is to start from the widest screen resolution and proceed to the narrowest one (styles are inherited vertically).

For instance:

@media screen and (max-width: 1400px)
   .box { ... }

@media screen and (max-width: 1200px)

Class “.box” is constant for lower resolutions as long as we don’t override it. 

Here’s the
Something went wrong with that request. Please try again.