Skip to content
CSS3 Media queries boilerplate
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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.