Link to home
Start Free TrialLog in
Avatar of Marisa
MarisaFlag for United States of America

asked on

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.
ASKER CERTIFIED SOLUTION
Avatar of David Kelly
David Kelly
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Marisa

ASKER

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.
"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...
Avatar of Marisa

ASKER

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.  =(
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".
Avatar of Marisa

ASKER

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
Avatar of Marisa

ASKER

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.
Avatar of Marisa

ASKER

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.
Commented on the other Q