Return to previous page

Theme Update Found Issues - by talonhead

This topic has 52 replies, 3 voices, and was last updated 8 years, 6 months ago ago by Eva Kemp

talonhead

Participant

March 25, 2016 at 15:33

Hey guys. My swapped image feature now doesn’t work correctly since the update…which tells me something slipped through the cracks on CSS modifications.

The swapped image overlays only 50% of the featured image. List view, grid, mobile, desktop…all the same deal.

Ideas? I thought we did all swapped image code mods through the Custom CSS page. Idk

Please, contact administrator
for this information.

#118930 Copied Theme version: 1.6

51 Answers

Eva Kemp

Support staff

March 25, 2016 at 17:25

Hello,

The issue with hover images was fixed in the theme update.
So please comment the css code you used and check your site after that.

Regards,
Eva Kemp.

#118942 Copied

talonhead

Participant

March 26, 2016 at 13:37

I’ve removed the code in the Custom CSS that had anything to do with the swapped hover image.

It’s still just a wee bit off in grid/list view desktop and mobile. A fine line is visible at the edge of the image and/or the image moves ever so slightly. You’ll see when you view the page.

To save further confusion on which particular things/areas to modify/add, please add the applicable code to fix this issue.

Thanks!

Please, contact administrator
for this information.

#119029 Copied

talonhead

Participant

March 29, 2016 at 22:18

No takers on this yet? Sure would like someone to check out all this Custom CSS code for me to fix the swapped image issue. Many thanks!

#119293 Copied

Eva Kemp

Support staff

March 30, 2016 at 10:52

Hello,

Sorry for a delay.
I’ve checked hover images and don’t see any problems
http://storage6.static.itmages.com/i/16/0330/h_1459331470_9444444_2b5dc2f3b9.png
http://storage9.static.itmages.com/i/16/0330/h_1459331530_1254144_572726482c.png

What browser are you checking in?
Show us a screenshot of the problem.

Regards,
Eva Kemp.

#119344 Copied

talonhead

Participant

March 30, 2016 at 14:10

I can’t really send you a screenshot of movement. This happens right at the moment of hovering over the image. The image will slightly move, have a thin white line show up at the right side of the image, then disappear. I’m using FF.

In Chrome, it’s the same thing….except the white line doesn’t disappear. Grid and List view are fine. Mobile is fine.

On both platforms, the issue is more likely to show in desktop view.

If I could send a video to illustrate this more easily, I would.

#119381 Copied
Eva Kemp

Support staff

March 31, 2016 at 08:24
Hello,

I’ve added this code in Global Custom CSS:
```
.product-image-wrapper.hover-effect-swap img{
backface-visibility: hidden;
}
.product-image-wrapper.hover-effect-swap img.show-image{
backface-visibility: hidden !important;
}
```
Please check swap image now.

Regards,
Eva Kemp.
#119499 Copied
talonhead

Participant

March 31, 2016 at 09:55

I see absolutely no change Eva. I’ve checked both on a Mac platform…and a Windows machine. 🙁

#119514 Copied

talonhead

Participant

April 1, 2016 at 11:38

And for the record, “Our Offers” and “Related Products” swapped images work perfectly for all resolutions.

#119695 Copied
Jack Richardson

Support staff

April 1, 2016 at 15:36
Hello,

Please take our apologies for delay.
I’ve added the following css code in Custom CSS for desktop section:
```
.product-image-wrapper.hover-effect-swap img {
    width: 180px;
}
```
Clear browser cache and check the shop page.

Best regards,
Jack Richardson.
#119725 Copied
talonhead

Participant

April 1, 2016 at 16:15

Like magic, it works! Thanks a bunch Jack. One last request. It doesn’t quite work right in List view on mobile in FF. Can you look into that please?

#119734 Copied

Jack Richardson

Support staff

April 1, 2016 at 17:56

Hello,

I’ve checked your site on mobile view and don’t see the problem with swap effect.

Best regards,
Jack Richardson.

#119741 Copied

talonhead

Participant

April 1, 2016 at 23:30

Try using FF and re-sizing your browser window on a desktop to mobile size. I don’t have FF for a true mobile device. I only re-size the browser.

Grid View…FF…re-sized browser to mobile view. Thin white line at left side of image immediately following hover…then disappears.

#119774 Copied

Eva Kemp

Support staff

April 4, 2016 at 08:20

Hello,

I’ve resized FF browser to mobile view and checked Grid layout of products.
Unfortunately I don’t see white line when hovering images.
Try to check it mobile devices.

Thank you.
Regards,
Eva Kemp.

#119842 Copied

talonhead

Participant

April 4, 2016 at 09:13

See attached link. FF re-sized to my mobile resolution…thin white line on hover…Grid View. On the actual mobile device, it appears momentarily and then disappears.

I know something just isn’t right.

Please, contact administrator
for this information.

#119867 Copied
Eva Kemp

Support staff

April 5, 2016 at 11:21
Hello,

Sorry for a delay.
I’ve added this code in Custom CSS for mobile section:
```
img.attachment-shop_catalog.size-shop_catalog.wp-post-image {
    width: 176px !important;
}
```
Clear browser cache and check images now.

Regards,
Eva Kemp.
#120061 Copied
talonhead

Participant

April 5, 2016 at 15:50

Did you check this yourself by re-sizing FF browser to mobile res?

#120108 Copied

Eva Kemp

Support staff

April 5, 2016 at 16:08

Hello,

Yes, I’ve checked it resizing the browser and on mobile.
I don’t see such issue that you described. Sorry.

Regards,
Eva Kemp.

#120114 Copied

talonhead

Participant

April 5, 2016 at 16:18

It’s obvious that you didn’t actually…or else you would have seen that in List View on hover, image changes to 370×255. Terrible.

Grid view has not changed. Still a white line at the left side of the image on hover. Happens in Chrome but it’s even worse. Image change size on hover in both Grid View and in List view.

I don’t think we’re getting anywhere with this. I’m about ready to give up.

#120119 Copied

Jack Richardson

Support staff

April 8, 2016 at 15:07

Hello,

Please take our apologies for delay.
We were able to replicate the issue with image hover effect you described and edited previously provided css code to fix the problem. Clear browser and server cache and check products page now.

Best regards,
Jack Richardson.

#120525 Copied

talonhead

Participant

April 8, 2016 at 15:39

By George! We might be getting somewhere. It’s the best it’s ever been. Only ONE hiccup this time. Check it in Chrome on a mobile. The swapped image overlays pretty far to the left in List View. Grid View is fine.

Both Grid and List are great in FF on Desktop…even re-sized down to mobile resolution. No issues. Same goes for Chrome for Desktop.

I appreciate your tireless support on this issue!

#120528 Copied

talonhead

Participant

April 14, 2016 at 09:36

Gosh…we sure slowed down on support these days didn’t we? Which incidentally, let me add to this ticket.

Drafting up my home page now. Check out swapped images on that page as well.

Please, contact administrator
for this information.

#121168 Copied
Jack Richardson

Support staff

April 18, 2016 at 10:29
Hello,

Sorry for a delay.
We’ve added the following css code:
```
@media only screen and (min-width: 320px) and (max-width: 480px){
.products-grid .product-image-wrapper.hover-effect-swap .show-image{
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    left: 0;
}
.products-list .product .product-image-wrapper.hover-effect-swap .show-image{
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
}

Global Custom CSS
img.attachment-shop_catalog{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(0 );
    -moz-transform: translateX(0 );
    -ms-transform: translateX(0 );
    -o-transform: translateX(0 );
    transform: translateX(0 );
    -webkit-transform: translateY( 0);
    -moz-transform: translateY(0 );
    -ms-transform: translateY(0 );
    -o-transform: translateY(0 );
    transform: translateY(0 );
}
.products-list .product .product-image-wrapper.hover-effect-swap .show-image{
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    left: 0;
}
```
Please clear browser cache and check hover images.

Best regards,
Jack Richardson.
#121690 Copied
talonhead

Participant

April 18, 2016 at 15:21

Wow. That’s quite a bit of code to fix these things.

Problem fixed on home page and swapped images. Done.

FF in desktop Grid…every image in the second product column on every shop page (for some odd reason) changes a very little bit in size. This happens at the transition from 1200px on up on the screen. However, swapped image itself is fine (as there is no more vertical lines at the leftmost or rightmost of the image any more as previously). See attached for more clarification..

FF in List view…desktop…no issues.

Chrome in List view…Desktop, swapped image goes slightly right. Visible white line at left of image. mobile view, no problem.

Chrome in Grid, desktop or mobile, no issues.

With all this said, do you think this has gotten way so complicated that we’ve gotten too close to the trees now?

Please, contact administrator
for this information.

#121812 Copied

Eva Kemp

Support staff

April 19, 2016 at 09:03

Hello,

We don’t see any issues in Firefox, please view the video https://i.gyazo.com/4f8a87a0d6d8c37f6b32ba83ea30f2f4.mp4 , but in Chrome white line is shown http://prntscr.com/au2kot , this is because sizes of those images differ. You have to change sizes only for those 2 images, try to find appropriate values for them.

Regards,
Eva Kemp.

#121898 Copied

talonhead

Participant

April 19, 2016 at 14:45

See all attached links…

Please, contact administrator
for this information.

#121948 Copied

talonhead

Participant

April 22, 2016 at 12:12

Another thing I’ve noticed. A few of my shop images have changed in size. See attached.

Also, I see that the issues in Chrome have been fixed? Bravo!

Second column in FF Grid still is a little funky. Let me know.

Please, contact administrator
for this information.

#122530 Copied
Eva Kemp

Support staff

April 22, 2016 at 13:21
Hello,

We removed this code in Global Custom CSS:
```
.products-list .product .product-image-wrapper {
   width: 25% !important;
}
```
Unfortunately for now we can’t reproduce the issue in FF.
We checked the site several times on different computers and all images are displayed correctly.

Regards,
Eva Kemp.
#122552 Copied
talonhead

Participant

April 22, 2016 at 17:48

So to make it that different scale, you do what exactly?

#122597 Copied

Eva Kemp

Support staff

April 22, 2016 at 20:25

Hello,

We didn’t change images sizes, only that code was removed.
On our side all images are shown properly in FF:
http://storage3.static.itmages.com/i/16/0422/h_1461353152_9690678_6ce9e0d8fe.png

Regards,
Eva Kemp.

#122608 Copied
1 2

Viewing 30 results - 1 through 30 (of 52 total)