“Custom Heading” Make Text Responsive

[Magnetic01]

Hi Kleo Team – I’ve searched for, and haven’t found, an answer to what I’m sure is a really simple question:
How do I make the text within a “Custom Heading” responsive?

As my home page scales down, the custom headings remain the same size and take up too much space.

Thanks for you help!

🙂

[Radu]

Hi,

Maybe you will have to specify fonts size in em not in px for that custom heading

Let me know

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Magnetic01]

Hi Radu,

My apologies for the delayed reply. I was out of town for a few days. I tried specifying the font size in ’em’ and that caused the text to resize, but did not achieve the results I was after.

What I’m trying to achieve is to have h1,2,3, etc. elements dynamically resize with the window and/or device (mobile) – while the body text size remains constant.
Here are 3 really good examples for the heading behavior I’m after:

http://codepen.io/lawrencealan/full/eJqlu – dynamic resize (preferred)
http://jsfiddle.net/b4FKY/ – dynamic resize (preferred)
http://fairheadcreative.com/why/ – Not dynamic (not preferred but would work for my needs)

Please let me know what you think!

Cheers,
Todd

[Radu]

Hi,

You can try to specify font size for headings in vh or vw.

If you want to control better this on mobile your can have another rule under 700 px form exaple

@media (max-with:700px) {

#main .main-color h1 { font-size: 3vw; }
//so on

}

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Magnetic01]

Hi Radu,

Thanks for your help! With a combination of vw & basic CSS (b/c I’m not very good with CSS yet!) I was able to achieve the dynamic text resizing I was after.

I very much appreciate your help, sir 🙂

Todd

[Radu]

Great !

You’we welcome

Have a nice week end

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts