Css not being applied on elements

I am basically trying to get the headings on this site: test.extensio-management.de

to get looking like on the screenshot attached.

Currently I was trying to get the text centered (in terms of height) within the colored background…

I am not sure where it’s coming from, so I’ve tried changing it in some way (just to see how it responds)

in Theme’s custom CSS:

h1{
background-color: #6cb52d;
border: 1px solid red;
padding-top: 10px;
}

but the padding is crossed out in red and doesn’t get applied (see screenshot).

What does this mean ?

I don’t quite see what you’re showing but if a rule has been crossed through like that, it means that another rule takes priority, possibly because it appears later in the CSS file or ir has greater specificity.

Scrolling through the inspection panel should show you what padding is being applied.

2 Likes

Oooops I misread the question

The padding is being set three times by more specific selectors, all on line one of fusion-880.css.

1 Like

Hi there McCloud,

seeing that you are using “Wordpress”, I would
hazard a guess that you may need to use…

   padding-top: 10px!important;

…to resolve the problem. :winky:

coothead

1 Like

awesome. That solved it.

One more thing… how do I make the background color to be only as wide as the title itself ?
(as in the picture attached in OP)

I won’t make it slant or do the gradient, as that would be too much hassle for little result…

One way (out of many) is like this:

h1 {
	display:table;
	margin:auto;
}

Of course generally you would not style all h1 elements like that unless you are using that style site wide. Usually you would use a class in the h1 or class via its context etc.

It also assumes that you do not have display rules of greater specificity in your stylesheet already or the above will not work.

2 Likes

great! thank you.

Although now the centering is off… I know it’s within a WP Theme, so everything is tied together and more complicated…

What would be the best way to get it working ? I’ve checked ‘center content’ on everything where it was possible :smiley:

I’m not at a computer at the moment but if the heading is left aligned then it’s likely that the margin:auto is being over- ridden by more specific styles.

You can add !important to the margin: auto to test and see if it centres and then you will know to look for more specific rules.

!important is usually a last resort so use it with care and instead match the specificity of the original. Sometimes with themes and applications like Wordpress the rules are so unwieldy that !important becomes the easier option.

2 Likes

this helped. Thanks!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.