@media queries Responsiveness

Note : the following code snippet requires advanced WordPress developer skills. There's no guarantee that this snippet works as is with the latest version of our themes, and with the latest version of WordPress. That's why you need to always test any code snippets in a staging environment before implementing it in a production site.

Last Reviewed: 7-May-15 (3.3.20) 3.1.* 3.2.* 3.3.*

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.

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.


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.


Related Snippets you may also like

17 thoughts on “@media queries Responsiveness

  • Reply
    Remi Turcotte

    how can i make the mobile menu “kick in” at 680 pixels rather than 991 (or 992 ) pixels ?


    Remi Turcotte

  • Reply

    I seek advice on how to apply CSS in MODERN style theme to smaller screens. As far as I can tell, ther is 1 break and I want to target all things below that resolution.

    Thanks in advance!

  • Reply

    how to make customizr slider responsive ? if I open my website on pc the slider load perfectly, but if I open it from my android mobile phone button,text on slider not load correctly.
    my wordpress version 4.7.4
    my customizr version 3.5.11
    web: unindopratama.com

  • Reply

    We need to decrease the width of the mobile site on iPhones. It fits some iPhones but is too wide for all. Also want to add a page background color on the mobile version as well. Can you tell me the css code for this?
    Thanks in advance.

    • Reply

      Hi Hanna,
      To target mobile phones, you’ll want to wrap your css code into :

      I hope this helps!

  • Reply

    Creating a mobile site and when i turn the phone to landscape my phone can scroll left to right which it not suppose to do, its the purpose of responsiveness.

  • Reply

    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.

    • Reply
      Dave Bardell Post author

      I see you’ve already seen this Snippet?

      I did make a small fix to that snippet which might have resolved your issue.

      However, there is no reason why that couldn’t be applied to smaller viewports. I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.

  • 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

    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

    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.


Leave a Comment

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

If you need to share some code, please wrap it 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=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">