troubleshooting Question

Need text to fit inside the viewport when resized

Avatar of Marisa
MarisaFlag for United States of America asked on
CSSHTML* revolution slider
10 Comments1 Solution94 ViewsLast Modified:
As you can see on this test page I'm working on, I have text overlaying the main background banner image, and the text resizes based on the screen size.
https://www.stadriemblems.com/products/enamel-pins-test/

It looks really good in the initial desktop state, but as you resize the window and go smaller, the text is too big to fit on the screen. To make it fit on the screen, the font size has to be made really small, which defeats the purpose of a big headline.

Font sizes based on screen sizes are controlled right in the made code here:

data-fontsize="['55','40','30','30']"
data-lineheight="['60','50','40','30']"

I'm wondering if there is a way to set some kind of container restriction that will cause it to automatically break onto two lines if the text is wider than the viewport. That way I won't have to make the font size so small just to fit.

Does that make sense? Let me know if you need more info.
ASKER CERTIFIED SOLUTION
David Kelly
Web Developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 10 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 10 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros