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',
data-lineheight="['60','50
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.
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',
data-lineheight="['60','50
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.
CSSHTML* revolution slider
Last Comment
David Kelly
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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...
This makes me think you will have a difficult time with this if you DONT want the text PRE-Wrapped...
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".
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".
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
https://www.experts-exchange.com/questions/29117670/Need-some-CSS-help-and-advice-for-divs-and-media-queries.html
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.
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