[Resolved] Odd CSS behaviour

Home Forums Support Odd CSS behaviour

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1147631
    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.

    #1147952
    David
    Staff
    Customer Support

    Hi there,

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

    #1147988
    Krystian

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

    #1148022
    David
    Staff
    Customer Support

    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 🙂

    #1148057
    Krystian

    Thanks 🙂

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.