I am trying to create a separate style sheet for responsive behavior in a site.
my folder structure:
- magzine/style.css
- magazine-child/style.css
- magazine-child/responsive.css
Magazine
is my theme folder.
I have following codes in my functions.php
/* Adding parent style sheet to the child theme */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
/* Adding Responsive style sheet */
function responsive_css(){
wp_enqueue_style(
'wpa_custom',
get_stylesheet_directory_uri() . '/responsive.css'
);
}
add_action( 'wp_enqueue_scripts', 'responsive_css', 999 );
I want to do some media query for ipad mini. so I put this code in child theme responsive.css
:
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.top-header ul { padding: 0 7px !important;}
}
wh
en I check my theme source code I see these two lines
<link rel='stylesheet' id='child-style-css' href='mysite.com/riffaz/athavan-eng/wp-content/themes/magazine-child/style.css?ver=4.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='wpa_custom-css' href='mysite.com/riffaz/athavan-eng/wp-content/themes/magazine-child/responsive.css?ver=4.2.2' type='text/css' media='all' />
So those style sheets are loaded into my site's head. That's fine.
When I put something on my child theme style.css
it takes affect. I see the edits on the front end.
BUT when I put media queries into child theme style.css
or in responsive.css
it does NOT work.
I'm barely confused why is this..
BUT if put the CSS code in an existing media query into my PARENT THEME directory style.css
it works..
How can I get it work when I put CSS on my child theme responsive.css
test site is HERE