responsive font size scaling for huge headlines - how to?

tableconnect

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"]

<div style="padding: 0px 10px; max-width: 650px; float: right;">

<h1><span style="color: #ffffff; font-size:120px;line-height: 90%;letter-spacing: 30px;">APP<br>DEMO</span></h1>

[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"]

<a href="#learnmore" class="scroll buttonslider">L E A R N   M O R E</a>

</div>

[divider height="25"]

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

thanks

Albert

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; }
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

tableconnect

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next