Issues with Revolution Slider responsiveness

[liz80y]

Hi,
I have placed a text layer on my slider which contains a link to my optin form. I can’t seem to get the responsiveness working correctly. I have gone into the settings and turned on ‘custom grid size’ to all devices and have made sure the responsive options in the behaviour tab have been activated.
The button is too large, the text varies from tiny to out of alignment on some devices and on a mobile the background image is too big for the screen and is chopped off. Can you please help?

Thanks,
Liz

[paul.r]

Hi Liz,

You can try adding this in Slider Settings > Custom CSS

.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;
}
}

Change the font size accordingly.

Hope that helps.

[liz80y]

Thanks so much Paul,
It seems to have fixed most of the issue. The images on the slider are still too large for the mobile though. What do i need to adjust to bring them back to the correct size?
Thanks,
Liz

[rad]

Hi there,

What do you mean by the correct size? It’s because in mobile, the screen is more on vertical so even if the image is on original size, it will still look bigger on mobile.

Or are you referring to slider grid size and maintain its aspect ratio in mobile?

Thanks!

[liz80y]

Hi Rad,
I have attached a pic of what i mean. First pic is mobile, the second my laptop. I’m not sure if it is just the way things appear, like you said. My slider images are landscape and when viewed on my mobile they are all cut off. Just thought there might be a way of them fitting better.

Also, not sure if i need to create a new topic for this, but is there anyway we can …

1. Shorten the ‘We’ll get you started’ button as it appears on the mobile. I would like it to appear as a button, not stretched across the entire mobile screen if possible.

2. Make the gap between the ‘Connect as a family’ box and the ’ We’ll get you started’ box as it appears on the mobile. I would like it to look like it does on my laptop.

Thanks so much.

[ruenel]

Hey There,

I would highly recommend that you check out this video tutorial on how you can create an auto responsive slider.

Please let us know how it goes.

[liz80y]

Awesome. Think i’ve got it sorted now. Thanks

[ruenel]

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