H4 Heading style keeps changing size – how do I make it a fixed size?

[john]

Hi there,

I’ve added CSS for H4 styles, because I’m using a custom font (with Typekit). However, the font-size changes many times when I resize the browser window, including to awkwardly small sizes for a heading.

Can you help my CSS to work (22px on large screens, 19px on screens under 760px) ?

Example page here, see the heading “Making switching a no-brainer”:
http://johnalderson.me/justswitch/

This is the code I added:

h4 { font-family: acumin-pro-wide!important; line-height: 1.4; letter-spacing: -0.1px; font-size: 22px; font-weight: 700; padding-bottom: 0px !important; padding-top: 0px !important; }

/*H4 on small screens*/
@media(max-width:760px){h4 { font-family: acumin-pro-wide!important; line-height: 1.4; letter-spacing: -0.1px; font-weight: 700; font-size: 19px; padding-bottom: 0px !important; padding-top: 0px !important; } }

Thanks in adv!

[SeaTheme]

HI,

Please add .entry before h4, like

.entry h4 { font-family: acumin-pro-wide!important; line-height: 1.4; letter-spacing: -0.1px; font-size: 22px; font-weight: 700; padding-bottom: 0px !important; padding-top: 0px !important; }

/*H4 on small screens*/
@media(max-width:760px){ .entry h4 { font-family: acumin-pro-wide!important; line-height: 1.4; letter-spacing: -0.1px; font-weight: 700; font-size: 19px; padding-bottom: 0px !important; padding-top: 0px !important; } }

Regards!

[john]

Thanks, trying now!

[Author]

Posts