Need text to fit inside the viewport when resized

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.
LVL 1
MarisaWeb DesignAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David KellyWeb DeveloperCommented:
The font size is not the problem, as it's scaling with the viewport size pretty well.

There is a "white-space: nowrap" style applied to the element, it will NEVER break to separate lines, that's what it does, prevents the line from breaking... EVER.
You COULD fix this with CSS, however, the slider you're using has positioned everything "absolutely", which means when you get that line to break it won't stay centered.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
MarisaWeb DesignAuthor Commented:
Oh, so, in theory, if I just removed "data-whitespace="nowrap" would that fix the problem? I mean, the breaking problem, not the centering problem.
0
David KellyWeb DeveloperCommented:
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

David KellyWeb DeveloperCommented:
"Revolution Slider doesn’t position elements in the normal flow of a document like your standard content behaves, so wrapping words in the way you’re expecting it to like standard content won’t work, but the method prescribed above is simple, effective, and easy to implement."

This makes me think you will have a difficult time with this if you DONT want the text PRE-Wrapped...
0
MarisaWeb DesignAuthor Commented:
Yeah, I only want it to break up onto two lines in the smaller viewports, so I wouldn't want to use the <br> tag, because that would cause it to be broken up initially. And I think on the largest size, it looks really good all on one line. Maybe what I want isn't possible with Revolution Slider.  =(
0
David KellyWeb DeveloperCommented:
I was hoping there might be a setting you could use, but the page I found above scuttled that idea.

I think you could use CSS media queries to achieve this, but it will require you dive down the rabbit hole of everything the plugin decided to place "absolutely".
0
MarisaWeb DesignAuthor Commented:
I think this slider is a lost cause. I am going to just manually write something from scratch with css. Which I am also running into problems with. You can take a look if you want, since you're already somewhere familiar with that I'm trying to achieve.

https://www.experts-exchange.com/questions/29117670/Need-some-CSS-help-and-advice-for-divs-and-media-queries.html
0
MarisaWeb DesignAuthor Commented:
One other question, though. I think I could live with breaking it up onto two lines, but when I do that, it is aligned to the left and I can't figure out how to align it center even though I put "text-align: center" right in the code. When I look at the inspector in F12, it says the text-align is set to inherit, but I can't figure out where it's inheriting from. Any ideas? Thanks for all your help.
0
MarisaWeb DesignAuthor Commented:
Oh, also, the rev slider is now the second slider on the page. The top one is something I was playing with manually with even less success.
0
David KellyWeb DeveloperCommented:
Commented on the other Q
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.