Parent css overwrites child css responsiveness

@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’ );
}

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 5 years, 1 month 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??

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

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.

@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 ??

@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??

@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?

@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 ); */