Return to previous page

Product Slider - by lyndav001 - on WordPress WooCommerce support

This topic has 19 replies, 3 voices, and was last updated 8 years, 8 months ago ago by lyndav001

lyndav001

Participant

August 19, 2015 at 21:10

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

#81117 Copied Theme version: 2.9 WooCommerce version: 2.4.4

18 Answers

Jack Richardson

Support staff

August 20, 2015 at 10:38

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.

#81208 Copied

lyndav001

Participant

August 20, 2015 at 10:57

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

#81211 Copied

Eva Kemp

Support staff

August 20, 2015 at 11:21

Hello,

Please provide us with wp-admin panel credentials in Private Content.

Regards,
Eva Kemp.

#81218 Copied

lyndav001

Participant

August 20, 2015 at 11:39

See private content.

Please, contact administrator
for this information.

#81221 Copied

Eva Kemp

Support staff

August 20, 2015 at 11:45

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.

#81227 Copied

lyndav001

Participant

August 20, 2015 at 12:01

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

#81234 Copied

Eva Kemp

Support staff

August 20, 2015 at 12:20

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.

#81241 Copied

lyndav001

Participant

August 20, 2015 at 12:32

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

#81243 Copied

Eva Kemp

Support staff

August 20, 2015 at 16:40

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.

#81322 Copied

lyndav001

Participant

August 20, 2015 at 20:02

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

#81401 Copied

Jack Richardson

Support staff

August 21, 2015 at 10:43

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.

#81504 Copied

lyndav001

Participant

August 21, 2015 at 11:00

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?

#81509 Copied

Jack Richardson

Support staff

August 21, 2015 at 11:41

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.

#81525 Copied

lyndav001

Participant

August 21, 2015 at 12:03

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

#81535 Copied

lyndav001

Participant

August 24, 2015 at 14:38

Hi

Please can we try resolve this issue as quickly as possible.

#81950 Copied

lyndav001

Participant

August 27, 2015 at 14:36

Please can I get a response to my issue.

#82772 Copied

Eva Kemp

Support staff

August 27, 2015 at 15:14

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.

#82785 Copied

lyndav001

Participant

August 28, 2015 at 15:43

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.

#83009 Copied
Viewing 19 results - 1 through 19 (of 19 total)