Some code in child theme style.css does not work

ForumCategory: TechnicalSome code in child theme style.css does not work
JimGasperini asked 2 years ago

Some of the css I enter in my child theme style.css works fine. Other code in the same file has no effect. Why?

  1. The snippet Christopher suggested to handle overlapping text strings in my header:

Way to make home page tagline from running under the navigation menu?

  2.  Code applying styles to tables, such as

table tr, td {
    vertical-align: top;

and similar for border-spacing, row background color, etc.
I came across a couple possible explanations here:

  1. “you are trying to change styles that are not in the the parent stylesheet, but in other custom stylesheets… your changes won’t work as most probably your child theme’s stylesheet is loading before the custom stylesheets in the parent theme.”
  2. something to do with the parent theme stylesheet not being loaded with wp_enqueue_scripts but through a <link> tag in the theme’s header. I wonder if this script in header.php is doing that: <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” />

i am a bit over my head here. Perhaps there is some other explanation for why some css in my child theme style.css has no effect, but not all. Any advice would be appreciated.

JimGasperini replied 2 years ago

I’m not sure what happened in the middle of my post here. My second example of css that doesn’t work was a code snippet for applying vertical-align styles to table. Other table styles don’t work either – cell padding, border-spacing, row background color, etc.

The link to a thread in stackexchange was introduced by: “I came across a couple possible explanations here:”

2 Answers
jgold723 answered 1 year ago

I’m having the same problem. Has anyone come up with a suggestion?

JimGasperini replied 1 year ago

I did manage to get past my problem, can’t remember exactly how for the specific issue here. Similar issues came up several times – it has to do with the order in which files load.

We use a plugin called Simple Custom CSS for high-level styling of the header. That is worth a try.

jeffwalberg answered 1 year ago

It’s likely because the changes you’ve made in style.css are loading before the UUA theme’s styles, which are in main.css. In other words, the parent styles are overwriting the child styles instead of the other way around. You can verify the load order by viewing the source code of a live page.
This issue has been discussed in another thread, and the solution worked for me. Good luck!
Main.css file overrides the child theme’s Style.css