[David DParticipant]

I have put text in a revolution slider slide, and the settings are set to auto responsive. When you resize the page to a smaller size, the text is responsive, but some eventually disappears due to the slider being too small. Is there any way to add a scrollbar to the slider when the content is too big for display?

[RadModerator]

Hi David,

Thanks for writing in.

Unfortunately, there is no way. The sizing of slider elements/layer are controlled by javascript. If you override it through css, then there are possibility that it may break your slider rendering.

Though, I’m not really sure what’s the problem. How about providing your site’s url and video recording of your issue? Maybe we can offer a little alternative. Though we can’t promise a 100% fix.

Thanks.

[David DParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add the following CSS under Customize -> Custom -> CSS :

@media (max-width:580px){
.page-id-7402 .tp-caption.black.tp-fade.tp-resizeme.start {
  font-size: 15px !important;
}
}

Hope it helps.

[David DParticipant]

I made that change and it didn’t really change. Thinks are still getting truncated as I shrink the page. I left the code in the Customizer if you want to check. Hope there is a way. Thanks again!

[Rue NelModerator]

Hello There,

Thanks for the updates!

Right now, we do not have any truncating script that will handle the job for you. You can however apply it through custom development. We must tell you that custom development is way beyond the scope of our support. We can only guide you where and how to start your customizations.

We would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

This script http://jrvis.com/trunk8/ could be the solution to your issue. You have just have to find away to add it in the theme.

Text Truncation is also already added in our feature list.

Thanks for understanding.

[David DParticipant]

Would it be possible to use media queries to adjust the height of the slider as the page gets smaller?

[NicoModerator]

Hi There,

You could try adjusting it using @media queries but we could not guarantee that it would help or it would be easy.

Let us know how it goes.

Thanks.

[David DParticipant]

Ok. So there is no easy way to manipulate the height of the slider in JS or css? Or you are saying you don’t help with those types of things?

[Rue NelModerator]

Hello There,

As much as we’d love to help, sometimes there are things that are way beyond our support. Our support covers minor cosmetic changes and code changes within X. Any feature addition outside X falls beyond our support. Thanks for understanding.

Back to your issue, the height of the slider will automatically adjust in relation to its width. You can just add a height by coding something in the css because your image will probably get stretch out or might be squished.

Please try this code that might help you truncate your text within your slider:

@media (min-width: 768px) and (max-width: 979px){
  .tp-caption.black.tp-fade.tp-resizeme.start .h-custom-headline {
    text-overflow: ellipsis;
    display: inline-block;
    width: 275px;
    height: 30px;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
 }
}

This only applies to your custom headline. You can tweak it a bit to apply to your other elements. Again this is the rendering of text within the Revolution slider. Maybe the creators of revolution sliders have better idea of doing this.

Let us know if this has been helpful to you.

[Author]

Posts