responsive font size scaling for huge headlines - how to?

tableconnect · August 2015

Hello,

thanks for the great support so far!

Just built a new page with really big headlines - they look fine on desktop resolutions,

but I need them to automatically shrink in fontsize on mobile/tablet/portrait mode:

http://tableconnect.net/usecase-app-demonstration/

What is the best way to implement such a behavior?

Current code of left column:

--------------------------------------------------------------------------

[divider height="200"]

[divider height="30"]

<h2><span style="color: #ffffff; font-size:40px;line-height:45px;letter-spacing: 4px;"><em>The Best Way to Interactively Present Your App.</em></span></h2>

[divider height="40"]

</div>

[divider height="25"]

------------------------------------------------------------------------

thanks

Albert · August 2015

Hi,

to shrink fonts on mobile devices, please use below css:

@media only screen and (max-width: 479px) {
    h1 { font-size: 20px !important; }
    h2 { font-size: 16px !important; }
}

tableconnect · August 2015

seems not to work because I manually set the font-size of the h1 with a span tag as you can see above.
so all other h1/h2 headlines are affected by your suggestion but not the one I need to be affected...

I´ll try to work with the "vw" value (viewport width) for dynamic continous scaling.

Unless there´s a reason not to do that...

Albert · August 2015

If above css does not work, then we do not have any other suggestion. This is the only solution we have.

responsive font size scaling for huge headlines - how to?

Comments