@media queries Responsiveness

A complexity for newbies to understand is that of ‘Responsiveness’. As the www has continued to develop, the devices that we all run browsers on have also continued to develop, and there is now a large number of generic and specific devices that need to be considered when producing a website. For example, the CSS needed to drive a website may need to be altered when running on a smartphone, tablet, laptop, desktop, widescreen or HDTV/SmartTV. All these devices have varying ‘viewports’, eg an iPhone5 in portrait mode is 320 x 568, an iPad in landscape mode is 1024 x 768 etc.

There are major discussions between Developers on whether to design from Monitor down to Smartphone or Smartphone up to Monitor. Customizr is based on Twitter Bootstrap 2 which was originally designed around Monitor down to Smartphone. For the majority of Customizr users, I would assume that this is how you will work. Given this assumption, you will probably write your CSS based on your Monitor. So be aware that when your new website is looking good to you on your Monitor, it may not look so good on one of these alternative devices. Developers have to go through a more robust testing process to make sure that their websites work on a minimum set of devices. And then they need to test using at least 5 different browsers – IE, Firefox, Chrome, Safari and Opera. And then they need to test on different versions of each browser. IE, in particular, has a set of idiosyncracies depending on using IE6 (a Developer’s nightmare) through to IE10++. This scene changes every week. So depending on your expected audience, you may need to think a bit more about your website design.

The good news is that Customizr and Twitter Bootstrap takes away some of the pain.

So you need to understand a little bit about the CSS @media type. By placing CSS code within different blocks of @media types enables you to adjust the base CSS to work on different devices. To test how this is working, you can try minimising your window and changing the width of the screen. But there is an easier way I’ve discovered. Using a free add-in Viewport Resizer in Firefox, Chrome, Safari & Opera enables you to do basic testing in a number of classic and custom viewports, both portrait and landscape. Browsers, such as Firefox, also have Developer Tools which include Responsive Design View tools.

Start to use this Snippet and it will hopefully become more obvious to the novice. Having developed your base CSS using either the CustomCSS panel or a Child Theme style.css, see what happens when you change the viewport. You are unlikely to need to change every base item, but add the few changed items between the @media statements, ie @media {} noting that will end in an } too.

Remember that CSS is executed serially, so this code should appear at the end of your style.css and be parsed after the base css.

ADD SELECTIONS OF THIS CODE AT THE END AFTER THE BASE CSS.

/* ================================================ */
/* Responsive - Media queries                       */
/* Based on:                                        */
/* http://lab.maltewassermann.com/viewport-resizer/ */
/* ================================================ */


/* ============================================== */
/* HDTV                                           */
/*                                      1920x1080 */
/* ============================================== */
@media screen and (min-width: 1080px) and (max-width: 1920px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

/* ============================================== */
/* Widescreen                                     */
/*                                       1280x800 */
/* ============================================== */
@media screen and (min-width: 800px) and (max-width: 1280px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

/* ============================================== */
/* Twitter Bootstrap                              */
/*                                       980x     */
/* ============================================== */
@media screen and (min-width: 980px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

/* ============================================== */
/* Twitter Bootstrap                              */
/*                                       x979     */
/* ============================================== */
@media screen and (max-width: 979px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}
 
/* ============================================== */
/* iPad Landscape & Portrait                      */
/*                                       1024x768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

/* ============================================== */
/* iPad Landscape                                 */
/*                                       1024x768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

/* ============================================== */
/* iPad Portrait                                  */
/*                                       768x1024 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

/* ============================================== */
/* Small Tablet Landscape/Portrait                */
/*                                        800x600 */
/* ============================================== */
@media screen and (min-width: 600px) and (max-width: 800px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}


/* ============================================== */
/* iPhone5/Android landscape (& narrow browser)   */
/*                                        568x320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:568px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

/* ============================================== */
/* iPhone4/Android landscape (& narrow browser)   */
/*                                        480x320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:480px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

/* ============================================== */
/* iPhone4/Android portrait               320x480 */
/* iPhone5 portrait                       320x568 */
/* ============================================== */
@media screen and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

/* ============================================== */
/* Smaller devices                                */
/* Android Landscape                      320x240 */
/* ============================================== */
@media screen and (min-width:240px) and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

/* ============================================== */
/* Smaller devices                                */
/* Android Portrait                       240x320 */
/* ============================================== */
@media screen and (max-width:240px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

More Information: w3schools.com