Archived topic

Odd CSS behaviour

4 replies · Started by Krystian on January 28, 2020

Viewing posts 1–5 of 5

January 28, 2020 at 4:29 pm #1147631

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:

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!

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.

January 29, 2020 at 2:55 am #1147952

Hi there,

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

January 29, 2020 at 3:33 am #1147988

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

January 29, 2020 at 4:07 am #1148022

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 :)

January 29, 2020 at 5:06 am #1148057

Thanks :)

This archived topic is closed to new replies.