Responsive font size with em

[rhodez]

Hi there,

I need to have a responsive font size on some elements so that my big headings fit in mobile view. Trying to do that with em instead of pixel based font size. For some reason this is not working. Is there some way to make this work?

I created a new css class “sectionhead” and used it in a text element.

.sectionhead {
font-size: 3em;
line-height: 1em;
}

and used this html inside a text element:

<h2 class=”sectionhead” style=”text-align: center;”>MY SECTION HEAD</h2>

But the text doesn’t get smaller in mobile iphone5 view, it behaves exactly like pixel based font-size.

My site (with big headings) is here: http://sometek.fi/

Thanks for help in advance!

[rhodez]

Solved! Used media queries instead:

@media only screen and (max-width: 320px)

This media query works ok for my custom css classes but not for id.
For example

@media only screen and (max-width: 320px) {

#bigblackbg span{
font-size: 24px;
}
}

WON’T CHANGE font size in iPhone. Help appreciated :).

[Melanie – SUPPORT]

Great job 🙂