[Resolved] Odd CSS behaviour

[Krystian]

Hello,
I have in my header element this html
<h1 class="entry-title" itemprop="headline">{{post_title}}</h1>
My site on mobile looks like that:

IMAGE

I wanted to make text smaller on mobile so I added such CSS under @mobile:

	.entry-title {
	font-size: XX%;
	}

I set font size for 80% and it was tiny! (but whatever) The thing is that even with 100% or even 130% it’s still smaller than without any CSS!

IMAGE

Could you please explain me why is so? I know I can set it in px, but I’m curious.

I’ve also tried

	h1.entry-title {
	font-size: XX%;
	}

and

	h1 {
	font-size: XX%;
	}

Same thing.

[David]

Hi there,

% font-size units are a product of the root font size. Browsers set this root size at 16px.

[Krystian]

Thanks. I was not expecting that for headings as different sizes are set in customizezr>typography.

[David]

Unfortunately CSS doesn’t work that way – it has no way of knowing or understanding what is in the Customizer or any other CSS rule 🙂

[Krystian]

Thanks 🙂

[Author]

Posts