Problem styling heading

HTML & CSS
1

Hello. I am having problems styling an H2.

The text I want to style is on two lines, but it seems to me that I should keep all of it as an H2. (Maybe that assumption is wrong?)

Here is how the text should look…

[quote]
Premium Digital
+ FREE eBook

I tried wrapping a around the second line, but I cannot seem to get the styling to work.

#offers .offerName{
  font-size: 1.3em;
}

#offers h2.offerName+span{
  font-size: 1em;
}

<div id="offers">
  <h2 class="offerName">Premium Digital 
          <span>+ FREE Book</span></h2>

</div>

The above is a snippet of a larger page, but hopefully that is enough to help me see what I am doing wrong!

2

Hi there UpstateLeafPeeper,

does this amendment help…

#offers .offerName span{
  display: block;
  font-size: 0.75em; /* adjust this value to suit */
  font-weight: normal;
}

coothead

3

@coothead,

My CSS brain is slowly coming back to me…

I believe I tried that last night and it was actually working, but what I forgot is this…

Having < span > nested in < h2 > means that when I set the font-size: 1em in span all that means is that it is the same size as the parent < h2 > of font-size:1.3em.

Right?

4

Spot on ! :biggrin:

coothead

5

So that is why I didn’t see any changes between a parent of 1.3em and a child of 1em.

This leads me to ask, “Is it a good idea to nest things like this?”

I thought so because technically all of the above is an H2 heading, right?

Also, it seems to me that there was a way to “hack” this multiplier effect, but I don’t remember how…

6

Yes. :winky:

In your example 1/1.3 = 0.769220769 so I set it to 0.75em
and added /* adjust value to suit */ to be helpful. :biggrin:

coothead

7

No, that wasn’t it. I am pretty sure there is - or used to be - a way to make EMs “absolute” instead of “relative” so that a 1em nested inside a 1.3em would still be 1em and not 1.3em!

I don’t necessarily need that level of precision, BUT if someone does know how to do that, please post here!

8

Hi there UpstateLeafPeeper,

I am sorry that you found my answer unsatisfactory. :wonky:

Perhaps this alternative solution will be more to your liking…


#offers .offerName span{
  display: block;
  font-size: 1rem; /* is this OK? */
  font-weight: normal;
}

coothead

1 Like
9

Yep, that’s what I was trying to remember.

As I recall, em vs rem is a big heated debate, and there are pros and cons to each.

Something to revisit for v2.0 :slight_smile:

10

Not for me, as a free spirit, I choose to use the em unit. :winky:

As such, it also explains why I did not think about giving
you the rem unit in my original reply to your query. :biggrin:

coothead

11

You are probably thinking px units. ( you DONT want to do that, by the way) But, px units are absolute and non cascading, thus 10px is 10px no matter what where as em and % are relative to the parent element. hope that clear things up.

12

I wasn’t thinking of px units, I was thinking of rem units. But that is a good reminder about px units! :slight_smile:

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.