Hi there,
I am having a CSS or JS issue with the slideshow on Opencart 2.0 on a Ubuntu based linux installation I have recently done.
I do not have the issue on the same version in my WAMP test environment.
The issue is that the right hand arrow on the slider sits in the same position as the left had arrow when hovering over the slide show.
I have inspected the items CSS and have been unable to pinpoint the cause, it happens for all browsers.
Has anyone seen this issue before?
http://under50dollars.co.nz is the site currently, you will be able to see the issue on the homepage.
Thanks for your time.
Small issue.
It has to do with this Flexslider RTL CSS:
It should be:
But it flips both of the arrows so this should only be triggered if you have RTL active. So I assume there is a class missing that is applied to the Flexbox when RTL is active which then should be prefaced in this CSS. If you comment out all the CSS code beneath the /* Flexslider RTL */ it fixes it.
It has to do with this Flexslider RTL CSS:
Code: Select all
.flexslider:hover .flex-next {left: 5px; right: auto;}
.flexslider:hover .flex-prev {right: 5px; left: auto;}
Code: Select all
.flexslider:hover .flex-direction-nav .flex-next {left: 5px; right: auto;}
.flexslider:hover .flex-direction-nav .flex-prev {right: 5px; left: auto;}
Awesome thanks.
I am travelling for the next day and a half so I will update this with the result once I get back to Internet.
EDIT: Thanks Chris_AXA removing the below worked perfectly.
I am travelling for the next day and a half so I will update this with the result once I get back to Internet.
EDIT: Thanks Chris_AXA removing the below worked perfectly.
Code: Select all
/* Flexslider RTL */
.flex-direction-nav .flex-next {background-position: 0 0; left: -36px; right: auto;}
.flex-direction-nav .flex-prev {background-position: 100% 0; right: -36px; left: auto;}
.flexslider:hover .flex-next {left: 5px; right: auto;}
.flexslider:hover .flex-prev {right: 5px; left: auto;}
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {opacity: 1; right: 0; left: auto;}
.flex-direction-nav .flex-next {opacity: 1; left: 0; right: auto;}
}
None of this worked properly for me.. the original recommendation made the arrow backwards. This is what worked for me:
1. EDIT: catalog/view/javascript/jquery/flexslider/flexslider.css
2. AT THE BOTTOM, ADD:
1. EDIT: catalog/view/javascript/jquery/flexslider/flexslider.css
2. AT THE BOTTOM, ADD:
Code: Select all
.flexslider:hover .flex-direction-nav .flex-prev {left: 5px; right: auto;}
.flexslider:hover .flex-direction-nav .flex-next {right: 5px; left: auto;}
.flexslider .flex-direction-nav .flex-prev {left: -500px; right: auto;}
.flexslider .flex-direction-nav .flex-next {right: -500px; left: auto;}
Who is online
Users browsing this forum: No registered users and 53 guests