Canvas Support

Rev Slider Mobile Appearance

5 replies · opened Dec 16, 2019

DDanuDesignDec 16, 2019

In my Rev SLider at the top of my homepage the buttons look really terrible on mobile (the width stays the same but they become really tall and hang out the bottom of the slider) and the arrows do not hide on mobile despite having hide_onmobile set to true.

SSemicolon WebSTAFFDec 17, 2019

Hello,

  1. This appears to be a Bug with the Resizing mechanism of the Revolution Slider. Simply adding height:auto; CSS Property to the Button via the style Attribute will fix this issue. Please use the following Code for the Button:
[Start Shopping ](#)
  1. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience. You can also consider checking out the Official Documentation: https://www.themepunch.com/revsliderjquery-doc/navigation-syntax/ on Navigation and the hide_onmobile Setting.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFDec 18, 2019

Hello,

There is a Blank navigation: {}, JS Setting within your Revolution Slider JS Code at the bottom of the Page here: https://staging2.danudesign.co.uk/, which might be causing this issue. Delete this and try checking this again. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

DDanuDesignJan 2, 2020

I've removed the blank navigation: {}

Still having this issue,

Also the button is now behaving normally but the text within the button is so small on mobiles that you can't read it...

SSemicolon WebSTAFFJan 2, 2020

Hello,

  1. This appears to be an issue with the Revolution Slider Plugin itself. We will need to wait for an Update from the Plugin Authors to see if they fix this issue in the near future. Meanwhile, you can consider adding the following CSS code:
.device-sm .tparrows,
.device-xs .tparrows { display: none; }
  1. Simply remove the .tp-resizeme Class from the Layer DIV that wraps the Button.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard