CODEWITHSUNDEEP
phpcsswordpress
Mike.Whitehead
Mike.Whitehead

Reputation: 818

Wordpress - Parent theme overriding Child styling

I'm building a site on Wordpress using html5blank theme as a parent for first time. The majority of my style rules in the child theme are working as they should but a few aren't and I can't work out why this is the case. I've built the front-end beforehand so I know the code works in the browser. For the front-end I used reset.css and skeleton.css for my grid. I haven't transferred over the reset file as the parent theme uses normalize.css. Do I need a standalone file for my skeleton grid or can it all go into the style.css (which is what I've done) ?

For example, this is how the top of the home page should look -

Front-end version

And this is how it looks in Wordpress -

wp version

Why would certain styles apply and others not? Other than style.css and functions.php are there any other parent theme files that could influence the styling rules which I need to recreate in the child to override this? Appreciate any assistance.

UPDATE

Looking in the developer tools it is these styles from the child which are being overridden by the parent (they're struck through in developer tools) 

.container {
    margin: auto;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

.showreel {
  height: 50px;
  max-width: 100%;
  position: absolute;
  background-color: black;
  bottom: 0;
  padding: 0 30px;
  justify-content: space-between;
}

.showreel, .showreel > div.seemore {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex:1;
}
.showreel, .showreel > div.seeour {
    justify-content: flex-end;
    flex:1;
    display: flex;
    align-items: center;
}

Upvotes: 0

Views: 228

Answers (2)

Frits
Frits

Reputation: 7614

Your question is quite broad, and it is hard to give direction without having a verifiable example in front of me.

Unfortunately, due to the nature of your problem, I am not sure if you will be able to give me a verifiable example so I am going to go ahead and point out the most obvious solution.

Generally, in cases like this, the problem is born from Specificity in your CSS rules.

Where you parent CSS file may initiate a rule like this:

.menu > ul > li a { /* four selectors */
    color: #00ff00;
}

And you have a rule in your child-theme stylesheet that looks like this:

.menu li a { /* three selectors */
    color: red;
}

In cases like this, your parent stylesheets rule will override your child stylesheets rule.

The easiest way to check for this is to inspect the element in your browser and see how many rules are applying to your element. Generally, when a specific rule is being overridden from another place, it will have a strikethrough style in your element inspector.

You can solve this by either:

  1. being more specific with your property declaration, or
  2. using the !important tag in your CSS

Upvotes: 1

Kelsner
Kelsner

Reputation: 69

Since I can not see the website it is hard to tell exactly what is wrong. But can it be that some styles from the parent theme have !important?

!important will override your CSS even tho' your CSS is loaded after the parent theme.

Here's a good answer if it is the !important from the parent theme that is the problem: https://stackoverflow.com/a/11178731/5611476

Upvotes: 0

Related Questions