Wordpress Theme Customizer: Live Preview CSS by Media Query

I'm using Worpress' Theme Customization API to allow changes by a user to my website colors. My website is responsive and the navigation changes color for mobile devices. My CSS looks similar to the following:

nav { background-color: #fff; }

@media only screen and max-width 767px {
    nav { background-color: #b00; }
}

I set up all of the JavaScript for the live preview as follows, but this binds to all display sizes. I'm not able to figure out how to make this bind to a media query.

wp.customize( 'background_color', function( value ) {
    value.bind( function( newval ) {
        $('nav').css('background-color', newval );
    } );
} );

Any help would be appreciated.

Thanks

Answers


Your media query in CSS should be:

@media only screen and (max-width: 767px) <-- brackets and colon missing here.

Further Info here.


Need Your Help

develop an Ajax client like google maps with GWT

java javascript jquery ajax gwt

Would it be possible (and recommendable) to develop an Ajax map client like Google Maps with GWT? Would it be easier to use something like JQuery?

ruby, create types for DSL without polluting global namespace

ruby types dsl

I have a DSL that uses custom types (objects that inherit from primitives, i.e. String), but I don't want to pollute the global namespace with them because they're only used in a few places and no ...