This topic has 19 replies, 3 voices, and was last updated 8 years, 8 months ago ago by lyndav001
Hi
I can’t seem to get the product slider (owl-carousel) to work properly on mobile. I have selected that it shows 1 image on mobile, but it shows 1 and a bit. I then adjusted the wrapper and item to 280px wide but the transform:translate3d element only scrolls 240px a time, leaving half of the first image exposed as well as only some of the second image. Please view my site http://www.amygrace.co.za to see what I mean (on mobile). This problem however goes away if you turn the phone to landscape and back to portrait.
Is there anyway to adjust the transform: translate3d element to 280px per x scroll? It is currently at 240px and this is causing the problem.
Secondly, is it possible to make my Rev slider go partially under my nav bar? So that the background of the nav bar covers the rev slider? Please see this site for an example http://graceloveslace.com.au/
I appreciate your help.
David
Hello,
Sorry, but I don’t see any issues with products slider:
http://storage1.static.itmages.com/i/15/0820/h_1440063468_1950502_9239efa663.png
Unfortunately there is no such option for Revolution Slider.
Best regards,
Jack Richardson.
Hi Jack
Thanks for the reply. I’m using an iPhone 5 and this is how it looks on my device.
http://s2.postimg.org/7qdybmehl/image1.png
As you can see, part of the second slide is visible.
What device are you using?
Thanks again
Hello,
Please provide us with wp-admin panel credentials in Private Content.
Regards,
Eva Kemp.
See private content.
Hello,
Please update Visual Composer plugin https://www.8theme.com/download-plugins/ to the latest version and check products slider after that.
Thank you.
Regards,
Eva Kemp.
I updated it to the latest version and the issue still exists.
Any other ideas?
Note how it works if you tilt the phone to landscape and then back to portrait.
This site shows you what I mean. http://quirktools.com/screenfly/#u=http%3A//amygrace.co.za/&w=320&h=568&a=37
Hello,
I’ve added this code in custom.css:
@media (max-width: 480px) {.owl-carousel .owl-item {width: 280px !important;}}
Please clear browser cache and check the page now.
Regards,
Eva Kemp.
I also tried that. The issue with that is that the transform:translate3d value remains at 240px and as such the image does not fully scroll out of screen (and the new image does not fully scroll into the screen).
Use the Google Chrome inspector to see what I mean. Here is an image of what I am referring to. Note the line selected has “transform: translate3d(-240px, 0px, 0px);” yet the image width is 280px and as such it doesn’t fully scroll.
http://s23.postimg.org/5oy5yg8ez/Screen_Shot_2015_08_20_at_1_28_44_PM.png
Hello,
I’ve edited the code and added this one in custom css:
@media (max-width: 480px) {.owl-carousel .owl-item {width: 330px !important;}}
Please check the slider now.
Regards,
Eva Kemp.
Hi Eva
That doesn’t work. The issue is a transform3d issue and the fact that the full x axis width isn’t scrolled. Increasing the item width won’t solve it.
Please can we find out how to manipulate the transform3d x axis.
Thanks
Hello,
I’ve added the following code in custom css editor:
@media (max-width: 480px) {.owl-carousel .owl-wrapper {transform: translate3d(30px,0,0); !important;}}
Please check products slider on mobile.
Best regards,
Jack Richardson.
Hi Jack
That doesn’t work.
If you use this link, http://quirktools.com/screenfly/#u=http%3A//amygrace.co.za&w=320&h=568&a=37 , you can see what I mean and test it.
I didn’t foresee this being a tough fix. Is it impossible to manipulate the “transform: translate3d(-240px, 0px, 0px);” value so that it is set to move -280px at a time? That would solve the issue. It adjusts to that value when the screen is rotated, how does it do that?
Hello,
I’ve checked the site and haven’t seen that issue:
http://storage9.static.itmages.com/i/15/0821/h_1440153611_4584387_bef0b522b0.png
Please your browser cache and check again or check it in another browser.
Best regards,
Jack Richardson.
Hi Jack
Please let me know what device and browser you are using.
I have the issue on an iPhone 5 with Safari and Chrome. And the issue also visible on the screenfly web application. http://s1.postimg.org/d2qnr9wun/Screen_Shot.png
Hi
Please can we try resolve this issue as quickly as possible.
Please can I get a response to my issue.
Hello,
Sorry, but I don’t see any issues. I’ve checked the site on mobile device and screenfly web application: http://storage7.static.itmages.com/i/15/0827/h_1440684716_5393823_d1b90baf49.png
Try to clear browsers cache and cookies and check the site again.
Regards,
Eva Kemp.
I have tested it on multiple phones and it doesn’t look right.
Please will you tell me what phone you are using? Screenfly also shows it incorrectly, unless you rotate the screen and rotate it back. This isn’t an option as it should load correctly without needing a screen rotation to sort out the layout.
The issue related to '‘Product Slider’' has been successfully resolved, and the topic is now closed for further responses