This topic has 52 replies, 3 voices, and was last updated 7 years, 10 months ago ago by Eva Kemp
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!
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.
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.
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?
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.
See all attached links…
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.
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.
So to make it that different scale, you do what exactly?
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.
Yes, I’ve fixed that problem now. All images are the same size. I’m asking, HOW do I get it back to that smaller, different scale?
It sort of grew on me…not hard cropped at all. See attached.
If you don’t see the issues with FF that I mentioned, did you not see my little video that shows you what’s going on at my end? Trust me…I’m not making this stuff up. maybe you’re not not looking at it close enough at hover? Again, this is only on the second column of products on the shop page.
Hello,
Sorry for a delay.
If you want to change images sizes go to Woocommerce > Settings > Products > Display and change the settings. Then regenerate thumbnails. As for the hover feature it’s working fine:
https://gyazo.com/0af897456e8a36a6583c95d99db8fcd9
Regards,
Eva Kemp.
Eva, please hover any of the images in the 2nd column. Your video will show it working properly because all you did was hover over one image at the right most column. See attached.
I know about how to change the image sizes and its workflow to do so, but you really didn’t answer my question HOW it got to the size I screenshotted (and pointed out) for you previously? You guys had done it. Just wanted to know the specifics.
I understand you’re getting burned out on going over this time and time again (hence the long delays in support on this issue).
Hello,
The problem is your image has shadow https://gyazo.com/9b601a1638cc3dba4d9a8c019a9e0541 but when hovering it the shadow is missing https://gyazo.com/1bd8072c48b8158cde05ba996de4482c , that’s why there is moving effect.
HOW it got to the size I screenshotted (and pointed out) for you previously?
We disabled Hard Crop option in the settings.
Regards,
Eva Kemp.
On the image shadowing, I don’t think that’s it. All my images are built having the same effect…but only the 2nd column does this “movement” thing. Not just the image I recorded the video sample of. That was just a sample of a 2nd column image to illustrate. See new video in attached.
On the image size deal, when you say you disabled “hard cropping”, did you rebuild a few images after which by chance?
Thoughts?
On the hard-cropping, what I did for a test was un-ticked the box saying “Crop thumbnail to exact dimensions (normally thumbnails are proportional)” and rebuilt one image.
That one image still looks the same when I checked out the re-freshed Shop page. So I guess I don’t fully understand the process?
Hello,
We checked your site on different PC’s with different OS and don’t see movement in the second column of products.
Please clear server cache, check the site with different browsers.
Thank you.
Best regards,
Jack Richardson.
Can I get an answer to the image re-sizing question asked above?
I’ve given up on the image movement in the 2nd column. I just don’t understand why you don’t see what I’m seeing here. I’ve checked on various systems as well….in fact, I’ve seen the 3rd column of images do the same thing on OSX with FF (the 2nd column would be fine).
Thanks and let me know.
Hello,
As I see now your images have the same sizes.
Do you want to make them smaller?
Regards,
Eva Kemp.
I want to make them in the same proportions as it was in the screenshot I had sent weeks ago.
Also, as typed above:
On the image size deal, when you say you disabled “hard cropping”, did you rebuild a few images after which by chance?
I tried this on my own and still couldn’t get the images to change like in the screenshot. Just looking for exact detail on what you did to get my images like that…instead of just reading “we disabled hard-cropping”.
Thanks
You must be logged in to reply to this topic.Log in/Sign up