Wordpress Redux Framework Media Queries

Question

I've been looking around and still didn't find any answers yet. My questions are:

1. How to output dynamic CSS inside media queries? In my mind, the CSS output from wordpress redux-framework has been written globally (both compiler/inline style) and will affect for all screen sizes.

2. What's the simpler way to output dynamic CSS in redux-framework in media queries way?

Answer 1

Haven't tested this, but should give you a rough start. You can use multiple fields (eg for 480, 768, 991 etc) and just output the code with wp_add_inline_style.

function my_custom_css(){

 //get the theme option
 $option = get_option('opt_name');

 // get the fields holding the custom css for each media query
 $media_991_css = $option['css991'];
 $media_768_css = $option['css768'];
 $media_480_css = $option['css480'];

 // store the values in a variable
 $output  = "@media screen and (max-width: 991px){" . $media_991_css . "}";
 $output .= "@media screen and (max-width: 768px){" . $media_768_css . "}";
 $output .= "@media screen and (max-width: 480px){" . $media_480_css . "}";

 // output it with wp_add_inline_style
 if(!empty($output)){
        wp_add_inline_style('style',$output);
    }
}

add_action('wp_enqueue_scripts','my_custom_css');

You would of course need to ensure proper escaping but this should get you what you need.