Hi,
I used a Slider Revolution but the text which appears on the site (ecspecially on mobile) is not the same margin en distance as the slides which I have made in the backend. Also on mobile: when I scroll, somethimes the slider sticks en than suddenly slides 4 slides in one time.
Does anyone know how I can change it to make it work smoothly and looks the same as in the backend?
Thanks,
Jan
Hi Jan,
Would you mind sharing your admin credential so that we can check your Revolution mobile layout in the back-end? To do that, please give us the following information in a Secure Note.
You can find the Secure Note button at the bottom of your posts.
Thank you.
Yes, of course!
Hi Jan,
Please validate first your website and update the theme to the latest version. I also suggest that you update your Revolution Slider plugin to the latest version and clear the cache.
Hope that helps.
Thank you.
Hi,
I validated my theme and updated alle on my staging site, but de slider isn’t functioning perfectly on mobile.
Also my top the top seperator which I created with element css disappears after the update (I created it with triangle css).
Jan
Hi Jan,
I found out that the revolution slider is just the same as your mobile layout on your mobile view, the reason why you are seeing it wrong is that the background in the revolution slider is transparent and on the front-end, the background is white, the same color with your overlay. I suggest that you either change the background color inside your revolution slider or change the background column of your revolution slider in the builder.
See this screenshot when the background is not white:
and the reason why the font color is green is that you had some custom CSS in the Theme Options > CSS. I am referring to this one. You can delete it if you want to have a white font color.
#over-tjisse-rev .font-revslider {
color: green!important;
}
On the other hand, the reason why the separator is not working with the new updates is that by default on the new latest update, there’s a defined border: 0 which overrides your custom CSS in the element CSS you added. To fix your issue, you need to override the default border by adding !important.
Before your code looks like this one:
$el {
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100vw 100px 0;
border-color: rgb(242,242,242) transparent transparent transparent;
position: absolute;
top: 0;
margin-top: 0px!important;
}
Then it should be updated to this one, to override the default border:
$el {
width: 0;
height: 0;
border-style: solid !important;
border-width: 100px 100vw 100px 0 !important;
border-color: rgb(242,242,242) transparent transparent transparent !important;
position: absolute;
top: 0;
margin-top: 0px!important;
}
Please note that enhancing the custom CSS code is outside the scope of our theme support. I am just giving you some hints and starting point to fix your separators. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.
Hope that helps.
Hi Marc,
Thanks for the response! But what I actually mean is that de slider doesn’t slide good. When you visit the site with your phone and swipe the slides, the slider suddenly moves three slides further.
And the spacing (between the image and the text) is also differant the on the desktop.
I’am sorry if my question wasn’t clear in the first place.
Jan
Hi Jan,
I have checked your website on my Android phone but didn’t find the issue you are describing here. Can you please mention the device, browser name and version, and also the operating system you are using, that helps us to replicate the issue at our end?
It will be a great help if you can provide any video that explains the problem you are having.
Thanks
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.