@media queries Responsiveness 7


Last Reviewed: 07-Apr-14

A complexity for newbies to understand is that of ‘Responsiveness’. As the www has continued to progress, the devices that we all run browsers on have also continued to progress, 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 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.

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 changed items between the @media statements, ie @media {} noting that will end in an } too.

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

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

More Information: w3schools.com

 

This post is intended to guide you to what you need. There is no single definitive solution – please post any discussions on this in the Forum and I will add/change this if it adds to my solution.

 


About Dave Bardell

My name is Dave Bardell (@rdellconsulting) and have been supporting the Forum since discovering this wonderful Theme. Have learnt a lot from other Supporters (@acub, @tomaja, @ElectricFeet, in particular). Have a library of snippets I've built up which in adding here, I'll try to acknowledge the original contributor but apologies to any I miss or wrongly attribute. daveb@rdellconsulting.com


7 thoughts on “@media queries Responsiveness

  • Reply
    mann

    hello dave,

    is it possible to turn off responsive function of Customizr theme. as i want to set that three images on main screen in single row even on my smart phone.

    regards,
    mann

  • Reply
    Michael

    Hi Dave, I am currently building a website and the mobile menu, the one that drops down, the background does not match my site at all,
    can you tell me how to change the background color and border css for the mobile main menu that drops down
    I’ve searched for hours trying to find an answer.
    I would be so grateful for any help

  • Reply
    Dave Bardell Post author

    I’ve updated the Snippet with some improvements for iPad users which I researched.

    This is becoming an even more complex area as time moves on, so you need to decide just how far you want to go. Kindles, certain Androids, iPad Minis are still not included with specific code in this snippet.

  • Reply
    Zach

    Hey Dave,

    I’ve tried to put the border: transparent code for the featured post images in every single one of these @media blocks and it still shows up with the featured image zoom and border on my iphone 4 browser. Is there some way to globally disable the featured page image zoom feature? It looks terrible on mobile.

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">