[mattisbParticipant]

Hello,

I have a testimonial slider I built using html slider and Soliloquy here: steelheadcountry.org
password is #bringemback!

The slider looks fine in a large viewport, but on smaller devices you can see that the text gets clipped and the slider container doesn’t use adaptive height. Can you help me fix?

Thanks!

[LelyModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look on your setup? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[mattisbParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Please try using RevSlider instead of Soliloquy for proper text scaling. Revslider has relative scaling which best on your current slider setup.

Thanks!

[mattisbParticipant]

Thanks Rad,

Unfortunately I have not had much luck using RevSlider instead. The text on mobile is so miniscule that it is illegible. I tried following the steps here: https://community.theme.co/forums/topic/revolution-slider-font-size-difference-between-mobile-and-desktop/ with no luck.

I tried creating a custom class called .testimonials-text with the following css

@media (min-width: 979px) {
.testimonials-text {
font-size: 22px !important;
}
}
@media (max-width: 979px) {
.testimonials-text {
font-size: 75% !important;
}
}

And here’s the html I have on one of the slides:

<span class=”testimonials-text”>
<p style=”text-align:center !important; max-width:960px; white-space: normal !important; background-color: rgba(50, 50, 50, 0.5); padding:15px; border-radius: 10px; color:#ffffff”>
What has happened to Steelhead Country is a travesty, a travesty that continues to unfold as we fail to learn the lessons from past river closures and population losses. It’s heartbreaking to watch how that failure is manifesting itself with wild steelhead’s last stand on the Olympic Peninsula. That said, I find hope in the recovery of some closed Puget Sound rivers and the anglers fighting for these amazing resources.”<br>
<br>
-Shane Anderson, North Fork Studios
</p>
</span>

One would think that creating a responsive testimonial slider would be relatively straight forward. This doesn’t seem to be the case at all!

[RadModerator]

Hi there,

How about like this

.testimonials-text {
font-size: calc( 22px + 0.5vw) !important;
}

22px is the base size, and it will change as the viewport change (eg. 0.5vw)

You can change the value to your preference. Still, heights may still change since each slide is independent to each other.

Thanks!

[mattisbParticipant]

Hi Rad,

That seems to keep the font size from getting too small, but the height of the slides themselves doesn’t adapt to accommodate the narrower layout of the text, nor is the line-height responsive. So frustrating

[RadModerator]

Hi there,

How about this,

.soliloquy-container, .soliloquy-container * {
font-size: calc( 16px + 0.5vw) !important;
}

Still, this is best implemented in rev.slider as you can have minimum height.

Thanks!

[Author]

Posts