Child theme CSS not overriding default CSS

[designheavy]

Hello,

We’re using the recommended X child theme for our customizations, however the styling overrides are not being picked up in the child theme style.css unless we use the !important qualifier on all elements.

Do you know why this might be? There are no CSS edits in the Cornerstone or X Theme CSS customizers - and it does not appear to be a cache issue.

Is there anything else we need to do so that X will use the child theme style.css edits?

Thank you.

[christopher]

Hi there,

Unfortunate;y the given login information does not include the pop-up login/pass needed to access the website.

But as a general rule of thumb, if you can not override a style, it shows that there is an option for that in the theme options or in the element that you use which injects the styling right into the HTML tag as an inline styling.

But for the more detailed check, we will need the access information.

Thank you.

[designheavy]

Hi Christopher,

Sorry about that. I have included the general HTTP login info at the bottom of the secure note above.

I’ll double check the theme options for styling, but I don’t think something else is going on.

Thank you for the help.

[christian]

Hey @designheavy,

Please move the CSS the overrides theme styles to Appearance > Theme Options > Global CSS. Why this does not work is because of CSS Specificity. If you’re overriding theme styles you need to put in Global CSS. You can put your own rules in style.css.

In the screenshot below, I see that you’re already using Roboto Sans in the Typography settings. You don’t need to override that with CSS.

Thanks.

[designheavy]

Thank you Christian. That makes sense I think.

We’ll follow this approach and will let you know if we run into any other issues.

[Joao]

Let us know how it goes!