0

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.

Improve this question
4
  • Define "fails"? Can you provide live example? Commented Apr 25, 2014 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. Commented Apr 25, 2014 at 16:16
  • P.s. I cannot provide a live example as the theme is being developed locally. Commented Apr 25, 2014 at 17:22
  • What do you have in your child theme Commented Apr 25, 2014 at 18:18

1 Answer 1

Reset to default
0

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:

<?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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.