1

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.cssit works..

How can I get it work when I put CSS on my child theme responsive.css

test site is HERE

Your Answer

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

Browse other questions tagged or ask your own question.