Help needed with calc value for responsive text sizing

[davidgaiz]

Hello,

I used your design cloud - blueprint creative columns 5 template to build a section on one of my pages. It worked out great except for the size of the headline in that section. At the largest screen size everything looks perfect and I’d love to be able to keep it that way at that breakpoint. The problem is that the headline doesn’t seem to adjust as the breakpoints get smaller and the headline then either gets too close to the adjacent column or moves behind it and gets cut off. I’m guessing there’s a calc formula that can be used for the font size to keep it looking balanced as the site gets viewed at different breakpoints, but it’s beyond my scope of knowledge. I’ve attached screen shots and login info, any help would be appreciated!

Thanks,
Dave

[lely]

Hi Dave,

Here’s the guide: https://css-tricks.com/snippets/css/fluid-typography/
Instead of 5em on text font size, please try to add this:
calc(22px + 16 * ((100vw - 480px) / 1020));

You can adjust values accordingly.

Hope this helps.

[davidgaiz]

Hi @Lely,

Thanks for the help! I tried in putting the value you provided, but the text still disappears behind the image at the medium and small breakpoints. Any other suggestions?

Thanks,
Dave

[davidgaiz]

Hi @Lely,

Please disregard the previous response. I went in and adjusted the number of columns in the row for smaller breakpoints and I was able to prevent the text from disappearing behind the picture after using your formula, thank you for your help!

Dave

[ruenel]

You’re most welcome Dave!
We’re glad @Lely were able to help you out.