Slider Revolution Content Responsiveness

Support
#1

I have made several attempts to create responsiveness on the Slider Revolution to remove the tiny or not showing text at all. I have used custom CSS found on this forum, watched and followed the directions in the ThemePunch video, but cannot get the text in the slider to display correctly.

This is the code, per another person’s help ticket I used:

Blockquote
.my-button .cp-trigger-shortcode {
font-size: 29px !important;
}
@media(max-width:979px) {
.my-button .cp-trigger-shortcode {
font-size: 25px !important;
}
}
@media(max-width:767px) {
.my-button .cp-trigger-shortcode {
font-size: 20px !important;
}
}
@media(max-width:480px) {
.my-button .cp-trigger-shortcode {
font-size: 17px !important;
}
}

#2

Hi,

Please remove the custom css code you have added.

You can actually resize or move layers base on screen widths.

2 Screen/Device

To use this option, you first have to enable a Custom Grid Size for additional screens/devices.

Toggling between the different options here will allow you to style and position your Layer content based on the selected screen/device.

For example, if you had a text-based layer, you could assign it a font-size of 64px, with a top-right position for desktop view. Then if you switch to the smartphone view, you could change the layer’s font-size to 32px, and give it a bottom-left position.

For more information kindly refer to the link below

https://www.themepunch.com/revslider-doc/slide-layers/#layercanvas

Hope that helps

1 Like
#3

That fixed the initial problem, however when I re-made the slide (design changes from management), it now shows up as a jumbled mess. The content is hardly visible, although the button is active.

On Cornerstone and live site: https://photos.app.goo.gl/G5KwVX7x3SDttLaX9

In Slider Revolution: https://photos.app.goo.gl/ws98uk9tq8xWk5Kq9

I do not have any cache plugins installed, I have tested on mobile (iOS), Firefox, Chrome, Edge (fresh view, no cache to even clear) and all have issues. Additionally, the entire page looks odd, text wrong colors where it looks fine in Cornerstone.

#4

Hi,

I checked and can see that the line height of the text layer was set to zero.

That is preventing the script to expand.

This is how it looks when I try to set it to 50

That can be set under Style Tab of your text layer.

Please check the link below for more information.

https://www.themepunch.com/revslider-doc/layer-styles-positioning/

Thanks

#5

I have the line set already (and updated it/resaved) at 55px, and still having this issue. It also doesn’t explain why the rest of the slider is jumbled. The 3 logos on the white background are hardly visible and the button is not where it belongs.

#6

Hi,

I checked again and the line height is still zero.

I would like to check the settings but the login provided doesn’t seem to work.

Kindly check again and let us know.

Thanks

#7

Hi, I updated the login, it should work now.

#8

Hi Jennifer,

Thanks for the login and the real cause of the issue is broken HTML. Please check this

There should be </center> since it has opening <center>. I went ahead and fixed it :slight_smile:

Cheers!

#9

/facepalm

Thank you! What a simple oversight on my part.

#10

You’re welcome!
We’re glad @Rad were able to help you out.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.