0

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;
}
Mike.Whitehead
  • 798
  • 18
  • 52

2 Answers2

1

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
Graham
  • 7,431
  • 18
  • 59
  • 84
Frits
  • 7,341
  • 10
  • 42
  • 60
  • Thanks, I've updated my answer with the code that is being struck through on developer tools. – Mike.Whitehead Jul 19 '17 at 13:29
  • Thanks @Mike.Whitehead - So it __is__ being overwritten then. If you follow my point regarding specificity, (and do have a look at the documentation that it links to if you can afford the time) you'll notice that if you increase your selectors, you should override the parent style. I.e., if the style that has taken precedence has 5 selectors in it's declaration - make sure you use at least 6 in yours. – Frits Jul 19 '17 at 13:33
  • Keep in mind, that if the rule that is taking precedence over your own uses the `!important` tag, then you will have to do the same to overwrite it. – Frits Jul 19 '17 at 13:34
  • So in the case of !important specificity is irrelevant? I can't just change .showreel to section#home .showreel ? – Mike.Whitehead Jul 19 '17 at 13:37
  • @Mike.Whitehead - Yes, that is correct. However, more specific `!important` rules will overwrite less specific `!important` rules, so specificity is still matters most of the time. From least important to most important will always go like this: __Less Specific__ < __More Specific__ < __Less Specific !important__ < __More Specific !important__ – Frits Jul 19 '17 at 13:42
  • Blimey, like trying to find a needle in a haystack - is there not a generic !important rule that knocks everything out?? I've made a start and there are some changes coming through! – Mike.Whitehead Jul 19 '17 at 13:44
  • Awesome - well done! I am glad this at least helped! Unfortunately `!important` was __meant__ to be that rule, it's just that some theme developers tend to use `!important` like a comma, so we have to use specificity to override their silliness. Please don't forget to upvote/mark the answer as accepted :) – Frits Jul 19 '17 at 13:47
  • One last thing and then I promise I'll leave you alone - there's one rule from the container (max-width: 100%) that is still struck through even though I've put important on it. Anything else I can do? – Mike.Whitehead Jul 19 '17 at 14:03
  • No worries, same suggestion stands regarding the amount of selectors in your query. If it's currently reading like `.mydiv { max-width: 100% !important; }` try adjusting the amount of selectors to be very high, something like 'body div div div div div div.mydiv { max-width:100% !important; }` obviously, just make sure that the selectors are valid :) – Frits Jul 19 '17 at 14:06
0

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

Kelsner
  • 59
  • 2
  • 9