Support » Fixing WordPress » Parent css overwrites child css responsiveness

  • Hello everyone,

    I have a bit of a problem currently. On my website I have a child theme installed. In the functions.php of my child theme I import only the parent css (child css is imported by default). But in the parent theme folder ‘styles’ there is also an other responsive-style.css. The responsive-style sheet is for devices with a width of 768 px. Everything is working fine, until I try with a device under 768px. The parent responsive-style.css overwrites my responsive css I have put in the child style.css

    Anyone knows how to fix this? It would mean a lot to me, I’ve been struggling this for a couple weeks..

    Kind regards,

    Robin Buren

Viewing 15 replies - 31 through 45 (of 52 total)
  • Thread Starter robinburen

    (@robinburen)

    @kuckovic Goodmorning, I have kind of found a fix. But the style.css of my child is now empty and I have put all my css (included my responsive css) in the responsive-style.css of my child theme. Here is my functions.php now:

    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’, 30);

    function theme_enqueue_styles() {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
    }

    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styless’, 31);

    function theme_enqueue_styless() {
    wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style-responsive.css’ );
    }

    Thread Starter robinburen

    (@robinburen)

    pastebin is here
    https://pastebin.com/Yi5vbtHX

    I do have some more functions in my functions.php but that’s just for woocommerce and google analytics.

    • This reply was modified 1 year, 3 months ago by robinburen.

    @robinburen

    I would not say that is the best way to do it.
    What happens, if you don’t enqueue the style-responsive.css at all??

    Thread Starter robinburen

    (@robinburen)

    I will change that now. You can now see the outcome when I dont enqueue the style-responsive at all at https://www.opsneeuwvakantie.nl

    Thread Starter robinburen

    (@robinburen)

    This is the result when i don’t enqueu style-responsive
    https://gyazo.com/6988ee02568c21ad418cb83f7da0fae3

    Hi @robinburen

    I see – it’s not optimal.
    I also see, in your functions file, you’re enqueueing the stylesheets in different functions.

    Could you enqueue them in ONE function only?
    Like I showed you previously.

    Thread Starter robinburen

    (@robinburen)

    @kuckovic

    Goodmorning,

    i have put this in the functions.php:

    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-responsive.css’ );
    }

    add_action(‘wp_enqueue_scripts’, ‘theme_enqueue_styles’);

    I commented out the two other functions. With the new function it gives the same problem that under 768px width the parent css is overriding the child css.

    Kind regards,

    Robin

    @robinburen

    You need to enqueue the responsive-css FIRST.
    It’s enqueued AFTER style.css and will overwrite it then 🙂

    Thread Starter robinburen

    (@robinburen)

    @kuckovic

    I did that now, but again it gives this:

    https://gyazo.com/28570cedf4edbf12e4a6cbfec89a914d

    @robinburen

    Have you flushed your cache after that?
    And can you please keep it like that for a moment, while I test? 🙂

    Another thing I was thinking…..
    Maybe the responsive-css was hardcoded to the header.php file..
    Can you please check??

    Thread Starter robinburen

    (@robinburen)

    @kuckovic Yes i flushed my cache. The new function is still there so you should be able to test.

    In the header.php I don’t see any responsive-css stylesheet that is imported. This is a tricky problem …

    @robinburen

    Are you looking in the parent or childtheme regarding the hardcoded responsive-stylesheet?

    Also, what does your parent functions.php look like?

    Thread Starter robinburen

    (@robinburen)

    @kuckovic
    Sorry for my late response sometimes, I’m at work and I don’t get a notification when you post so sometimes I forget due to my concentration. I looked in the child theme header for the hardcoded responsive-stylesheet.

    My parents functions is in this link: https://pastebin.com/m3dsFugh

    Can you comment out line 122 in that file?
    It should be this:

    wp_register_style( 'thinkup-responsive', get_template_directory_uri() . '/styles/style-responsive.css', '', $thinkup_theme_version );

    To comment it out, you can do like this:

    /* wp_register_style( 'thinkup-responsive', get_template_directory_uri() . '/styles/style-responsive.css', '', $thinkup_theme_version ); */

Viewing 15 replies - 31 through 45 (of 52 total)
  • The topic ‘Parent css overwrites child css responsiveness’ is closed to new replies.