fade product image effect bug on mobile

[mattylb]

When I had the Theme options > Woocommerce > Product image effect* set to “Fade”, the catalog view shows both images (Feature & Gallery1) stacked on one another. I though at first it was a cache issue but I verified it wasn’t. I switched from Fade to Bottom-Top and it works fine.

I’m not worried about a quick fix but this is something you might want to look into for an upcoming theme update. Thanks! 🙂

[mattylb]

My apologies – I forgot to mention in the main content that this is only happening to me on mobile devices, such as my LG smartphone and Nexus 10 tablet – any browser. Desktop browser displays correctly.

[SQadmin]

Hi, you can hide it by placing the following line in admin- theme options – quick css box:

COPY CODE

@media (max-width: 991px) {
	.kleo-woo-back-image {
		display: none;
	}
}

We will solve this in next version update.
Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[mattylb]

Hi all,

This is still happening on a 10″ tablet (android) using both Chrome & Firefox browsers. (www.iowish.com) and I noticed it displays correctly when I switch from landscape to portrait mode and the columns change from 4 (normal) to 3 (responsive).

I’ve also changed the “991px” in the code to as low as 700px and it still doesn’t help.

Any suggestions? 🙂

[mattylb]

Here are some screen captures to show what’s happening in both views…

Attachments:

You must be logged in to view attached files.

[Abe]

Can’t reproduce that unfortunately. Try putting the above css and change 991 to 1024

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[mattylb]

I tried the 1024 and it still happens on all android devices, no matter what browser. Only happens with Fade & Left-Right image effects. Not an issue with Bottom-Top effect, which seems like a good effect to compare to if I knew which file or what to look for.

Thanks.

[Abe]

Strange.. maybe with !important..

COPY CODE

@media (max-width: 991px) {
.kleo-woo-back-image {
display: none !important;
}
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[mattylb]

Still not working. I’ve tried 1024, !important and everything else I can think of.

Isn’t there a way to disable certain views or functions if the device is touch-enabled? Maybe the directive should be determined by that instead of screen width.

Again I ask, why is the NOT an issue with the “Bottom-Top” Product image effect? It only happens when “Fade” or “Left-Right” effect are used AND it only happens in landscape view (full screen mode) on touch-enabled tablets. When I change the tablet to portrait view (one-column responsive layout) the issue goes away.

Thanks

[Abe]

Have you updated your theme to the latest version since that should have been fixed. I did some tests locally and couldn’t reproduce on an iPad.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Abe]

Can you check the live site too please? http://seventhqueen.com/themes/kleo/shop

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Author]

Posts