Within my parent theme functions.php, I have the following snippet:

// Add mediaqueries-js
function footer_scripts(){
    echo '<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->';
add_action( 'wp_footer', 'footer_scripts' );

This adds media query support to IE7 and IE8. The script runs perfectly in IE7/8 with the parent theme, but fails to work and ignores the media queries when activating the child theme.

All other scripts are enqueued correctly and run as they should. The script is showing within the source code when the child theme is activated.

  • Define "fails"? Can you provide live example? – Rarst Apr 25 '14 at 15:46
  • The script is not working when the child theme is active. When I reduce the browser viewport, the media queries are being ignored. – Sam Apr 25 '14 at 16:16
  • P.s. I cannot provide a live example as the theme is being developed locally. – Sam Apr 25 '14 at 17:22
  • What do you have in your child theme – Pieter Goosen Apr 25 '14 at 18:18

The author of css3-mediaqueries-js states the following via https://github.com/livingston/css3-mediaqueries-js:

Note: Doesn't work on @import'ed stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the `<link>` and `<style>` elements.

style.css via my child theme uses @import to bring across the parent theme stylesheet.

To overcome the problem, I am no longer loading the core CSS file from header.php in my parent theme. Instead, I am loading the CSS via functions.php:

// Register parent styles
wp_register_style( 'core-styles', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'all' );

// Enqueue parent styles
wp_enqueue_style( 'core-styles' );

// Register and enqueue styles if child theme
  if (is_child_theme()){
    wp_register_style( 'child-styles', get_stylesheet_directory_uri() . '/style.css', array(), '1.0.0', 'all' );
    wp_enqueue_style( 'child-styles' );

This code loads the parent CSS first and then the child CSS if a child theme exsists. This solution solves the media query issue in IE7/8.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.