Two lines of CSS in Stylesheet pertaining to font size per header tag.

[Genesis Child]

So I have been changing some of the CSS in the stylesheet to change font sizes. What I noticed is that there is two lines of code pertaining to the font size for things like H Tags.

For example:

h1 {
font-size: 36px;
font-size: 3rem;
}

h2 {
font-size: 30px;
font-size: 2.4rem;
}

h3 {
font-size: 24px;
font-size: 2rem;
}

h4 {
font-size: 20px;
font-size: 1.9rem;
}

h5 {
font-size: 18px;
font-size: 1.8rem;
}

h6 {
font-size: 16px;
font-size: 1.7rem;
}

As you may be able to tell I have already changed the font-size (rem) for each Htag. Now this gave me the desired result. I had initially changed the px but nothing changed on the front end of the website. Now my assumption here is that there are two values so that if a browser can't read one font size code it will use the other... right?
Correct me if I am wrong.
N E way. I ended up changing the rem size instead and it worked fine.
My question. I have since gone through and used a rem to px calculator to figure out what I should set the other codes to, (assuming what I have said in the above paragraph is correct). All of the px codes are still the original values (I saved a copy of the stylesheet before I edited anything) and when I entered the px values into the calculator the rem code that it gives me (I have tried numerous calculators) do not match the original rem value that was set. In short the px and rem font size codes don't seem to equate to the same value.

Am I missing something here. Have I got this all wrong. Are the two values not used in the way I think they are?

HELP!

[Genesis Child]

Ok ok. I think I just figured this one out on my own to... but a confirmation will see my query set to resolved.

I assumed that rem and px was standardised as values. That sentence probably makes no sense. I'll try again. It appears as though the rem is set by the user in relation to the px. So one theme might relate rem as a percentage of px completely different to another. So it appears as though the rem is 10% of the value of the px in the genesis sample child theme.

Is this right?

So 30px is 3rem and 24px 2.4rem...

Is my understanding correct?

As I am now planning on just multiplying the rem by 10 to get the equivalent px value... so I can match them...

but my initial question still remains... are these two values just there in order to cater towards how different browsers read the code i.e. there is two just in case the browser can't read one or the other.?

[Davinder Singh Kainth]

rem is just another format to set values for various classes. If you only have px values, your theme will still work - however, having rem along with px is new better way. Yes, you can convert px value into corresponding rem values like:

30px = 3rem
14px = 1.4rem

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[Genesis Child]

Initially I just changed the px value and nothing happened front end (no visible change to font size), so I went in a changed the rem value and the font sizes changed.

Anyway thank you.

I have just gone through and made sure all the px's match the relative rem, just to be clean.

Again thanks,

Genesis Child

[Author]

Posts