Can't change font size in a flexbox

Get Help CSS
#1

Hi. I have a problem with changing my font size in div which is a flexbox.
My html piece is: <div class="foot_note"> <p>copyright The Tea Cozy 2017</p> </div>

When I try to change font size like this it doesn’t work: .foot_note { display: flex; margin: 20px; font-size: 10px; }

Yet if I do it like this: .foot_note { display: flex; margin: 20px; } .foot_note p { font-size: 10px; }

then everything works fine. Why is that? I also tried using !important but it has no effect. Those are last lines of my code so nothing is overwritten later.

#2

Hard to help actually. Here’s the example: Edit fiddle - JSFiddle - Code Playground

I was able to successfully change the font size to 10px just by using .foot_note selector.
Please carefully check your code if you really have those rules, and double-check if nothing is overwriting your rules. Maybe you have a caching issue. But it clearly works.

#3

Do you have any styles on your p element? Example below–text would show as 50px because of the p style.

p {
font-size: 50px;
}
.foot_note {
display: flex;
margin: 20px;
font-size: 10px;
}

#4

i double checked everything, i only have a general rule with * changing font size. This also doesnt really tell why !important was not working. I thought that maybe it is because of the flexbox but I don’t know why would flexbox be an issue

#5

Try to reproduce your example on jsFiddle with all the code you got, and let’s see what happens then.

#6

here is the rest of the code. As you can see the problem persists there too

Edit: pictures are not working on fiddle because they were saved locally

#7

I see this is to be expected. The rule that is overwriting your .foot_note selector rules is an asterisk selector ‘*’ that matches every single element on the webpage. So what happened is that you actually defined font-size: 10px; on .foot_note selector, but since paragraph element is a child of div.foot_note element it inherits the font-size from the parent, but it has lowest priority, so asterisk selector is effectively overwriting your font-size: 10px; to font-size: 22px;

What you can do is you can be more specific like → .foot_note p, so then your font-size: 10px; will apply visually. Or you can just remove paragraph tags that wrap that copyright text, so .foot_note rule will directly apply also and it will work.

Let me know if it’s clear and you are able to achieve what you want?

#8

I understand yet I thought that asterix selector would have lowest specificity. One thing that bothers me though is why !important didn’t solve my problem in the first place. Any ideas? I know how to circumvent the problem but I want to understand. Thank You for Your replies!