Can't use style.css, must use Additional CSS


I’m working on Sparkling. Installed the child theme, and modify css in styles.css. Strangely enough most changes are not accepted. I have to place them in Additional CSS, in the child theme itself to get it to work.

Am I doing something wrong?

Hi Jos,

I hope you are well today and thank you for your question.

It seems you are facing CSS specificity issue so please make your CSS code more specific by referring the information shared in the following pages.

Best Regards,

I’ll give you an example:
I want to remove the top border of the colophon. In the code inspector that is on styles.css line 1407:
#colophon {
background-color: #1F1F1F;
padding: 10px 0;
border-top: 1px solid #3A3A3A;

I copy that into my styles.css of the child-theme, and change the border-top to ‘none’. In the code inspector that works. When I refresh my browser, the border is back. Adding !important doesn’t help.

Same here: I want to change the border, but it is overwritten in style.css on line 1370
#footer-area ul li, #footer-area .widget_nav_menu ul li a {
border-color: #a5f412;

You can try making it more specific by using below CSS code.

#page #footer-area #colophon {
border-top: 0 !important;

If it doesn’t work for you then could you please share me your site URL where you are using it so that i can troubleshoot it?