I want to make a separate responsive.css file in my child theme but having trouble making the media queries override the styles in the child theme’s default style.css.
I’ve tried putting <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/responsive.css" type="text/css" media="screen"/>
after the <?php wp_head(); ?>
code, which works, but I’ve read that this is not good practice.
I do not really want to add the media queries to the end of style.css as it’s already large and getting quite confusing!
You can enqueue your own stylesheet by adding this to your child theme’s
functions.php
file:This will load the file
responsive.css
located in your child theme directory. The priority is set very low (999) so it is more likely to appear after other styles which may be enqueued on the same action.The 3rd parameter accepted by
wp_enqueue_script
is $dependencies… aka what stylesheets must be loaded prior.