[markwestParticipant]

Hi,

I’m trying to resolve an issue where the bottom of characters in headings – h1, h2, h3 etc that hang below the line -e.g. ‘y’ have their bottom cut off.

The only way I can seem to resolve this is by reducing the font-size percentage – from 400% to 360% for h1 and so on for h2, h3 etc.

But this is not an ideal solution as I’d like the headings to be the larger size with the following content shuffled down a little.

I will provide login details and page examples in a following private reply.

Thanks in advance for your help.

Thanks

Mark

[markwestParticipant]

This reply has been marked as private.

[RupokMember]

Hi Mark,

It seems fine on my end- http://prntscr.com/cjp5po. You can try to add a proper line height to them. You can use the style field and place the line height (i.e. line-height: 1.5; )

Cheers!

[markwestParticipant]

This reply has been marked as private.

[RupokMember]

Hi again,

As mentioned earlier I can’t see such cut-off for them so not sure what you are referring. Here goes another screenshot on my end – http://prntscr.com/cjpcy5

Apparently there is no cut-off that I could see. Would you clarify that first with a screenshot?

Thanks!

[markwestParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

I tried in firefox and chrome but can’t seem to replicate the issue on my end.

You can try adjusting line height per screen size.

eg.

@media (max-width: 979px) {
   h2 { 
      line-height: 50px;
   }
}

@media (max-width: 767px) {
    h2 {
        line-height: 40px;
    }
}

@media (max-width: 480px) {
    h2 {
        line-height: 30px;
    }
}

Hope that helps.

[Author]

Posts