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 - 1 through 15 (of 52 total)
  • Hi @robinburen

    How are you enqueuing your stylesheet for the responsive CSS?

    Best regards
    Aris Kuckovic

    Thread Starter robinburen

    (@robinburen)

    Hi @kuckovic

    Sorry for late response was having a lunch. Thanks for your response by the way. Currently I am only enqeueing the parent css:

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

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

    In the style css of the child theme I have put my own responsive css at the bottom.

    Kind regards,

    Robin

    Thread Starter robinburen

    (@robinburen)

    @kuckovic I have now done this in my functions.php:

    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’, 40);

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

    Here I enqueue my parent css and I have put all of my css in the style-responsive.css. It working fine now, but the problem is that I have an completely empty style.css in my child theme folder. This is not really a clean way of doing it I think.

    Do you have an other solution?

    Kind regards,

    Robin

    Hi Robin

    Lunch is important – never skip it (just like legday :P)!
    You’ll need to import the responsive CSS aswell – otherwise it won’t work.
    You know how to do it?
    If not, I will help you write the enqueue-script:)

    Best regards
    Aris Kuckovic

    @robinburen

    I would do it like this:

    function theme_enqueue_styles()
    {
        wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
        wp_enqueue_style( ‘responsive-style’, get_template_directory_uri() . ‘/styles/style-responsive.css’ );
    }
    
    add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

    You should NOT copy your style.css into the responsive stylesheet.

    // Aris

    Thread Starter robinburen

    (@robinburen)

    Hi @kuckovic

    Haha lunch is very important just like legday indeed! The last solution you provided will give the problem that the parent style-responsive will overwrite the child style.css. Its a difficult problem… 🙁

    Thanks for all your answers. I hope we can come to a solution together.

    Kind regards,

    Robin

    Hi @robinburen

    Can you put the code in functions.php – and please send me a link to the website?
    I will have a look at it then 🙂

    Best regards

    Thread Starter robinburen

    (@robinburen)

    @kuckovic Hi,

    So you want me to put your solution in the functions? Could you confirm this? Then I will do it Asap.

    Thanks man

    @robinburen

    Yes, correct 🙂
    I will have a look at the site then.
    Can you send me the URL aswell?

    Thread Starter robinburen

    (@robinburen)

    Hello @kuckovic

    I have put your solutions in the functions.php. the url of the site is https://www.opsneeuwvakantie.nl

    If you make a screen of 767px width (I think you know how that works) then you see that the whole header is doing weird now. The layout has to be the same as the layout with a width of 768px and higher.

    Thanks a lot. I really appreciate it.

    Hi again 😀

    I see now.
    I also see, that you have a plugin which compiles/combines the stylesheets.
    This might be the problem.

    Are you familiar with this?

    Thread Starter robinburen

    (@robinburen)

    Hi @kuckovic ,

    I use Autoptimize and lazy loading. Do these plugin give problems?

    I know kind of what these plugins do, but not how it can be the problem in this case.

    Kind regards,

    Robin

    Hi @robinburen

    Autoptimize can be set to combine your CSS – and that may have an impact on the frontend.
    Can you deactivate that rule in Autoptimize?

    Just for test purposes.

    // Aris

    pro-tip; you can disable Autoptimize on a per-request basis by adding ?ao_noptimize=1 to the URL.

    if the problem is not there at that point, some autoptimize (re-)configuration might be needed to fix this. there are troubleshooting tips and info on how to exclude in the AO FAQ.

    hope this helps debugging,
    frank (ao dev)

    Thread Starter robinburen

    (@robinburen)

    @kuckovic Okay I will deactivate that rule now. Can you check again please

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