Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
Define "fails"? Can you provide live example? –  Rarst Apr 25 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. –  Squideyes Apr 25 at 16:16
    
P.s. I cannot provide a live example as the theme is being developed locally. –  Squideyes Apr 25 at 17:22
    
What do you have in your child theme –  Pieter Goosen Apr 25 at 18:18

1 Answer 1

up vote 0 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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