Return to previous page

Making List View Images Same Scale as in Grid View?

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

talonhead

Participant

March 10, 2016 at 11:51

I’ve got a image scaling difference on this one. Grid View is 189×249 and List View scales to 270×355 for both Category page and Product page.

Need to make images at Grid View scale for List View.

Takers?

Remember…I have image swapping going on as well on hover.

Thank you!

#116815 Copied

29 Answers
Jack Richardson

Support staff

March 10, 2016 at 14:31
Hello,

Please use this code in Custom CSS for desktop:
```
.products-list .product .product-image-wrapper.hover-effect-swap img, .products-list .product .product-image-wrapper.hover-effect-swap .show-image {
    width: 189px !important;
    height: 249px !important;
}
.products-list .product .product-image-wrapper {
   width: 24% !important;
}
```
And change this code
```
.product-image-wrapper.hover-effect-swap .show-image {
    left: 13px !important;
}
```
to this one:
```
.product-image-wrapper.hover-effect-swap .show-image {
    left: 7px !important;
}
```
Best regards,
Jack Richardson.
#116863 Copied
talonhead

Participant

March 10, 2016 at 16:07

Works great as usual! Thanks a bunch there Jack. One little issue…when minimizing the browser to mobile size, the image swap is offset for some reason for List View. 🙁 Grid is fine for desktop and mobile. Let me know?

#116888 Copied
Jack Richardson

Support staff

March 10, 2016 at 17:44
Hello,

Please add this code in Custom CSS for mobile:
```
.products-list .product .product-image-wrapper.hover-effect-swap .show-image {
   left: 30px !important;
}
```
Best regards,
Jack Richardson.
#116903 Copied
talonhead

Participant

March 10, 2016 at 17:55

Thanks Jack. I had to make it 39px to even it out. One last question. The wishlist and quickview icons are severely offset in List View mobile. In Grid they overlay right on top of the image as they should. List View they don’t. Thoughts on that?

#116906 Copied
Jack Richardson

Support staff

March 10, 2016 at 18:38
Hello,

Please add this code in Custom CSS for mobile:
```
.products-list .product .product-image-wrapper .footer-product {
  right: 25px !important;
}
```
Best regards,
Jack Richardson.
#116913 Copied
talonhead

Participant

March 11, 2016 at 00:05

That worked…even though it needed 45px to move it over enough…but this List View with image swap on mobile is driving me nuts. I can’t seem to get the swapped image to line up perfectly. It is REALLY sensitive to the res of the screen. If the screen varies even a few pixels, the swapped image doesn’t lay perfectly on top. I can’t even get it perfect by keeping the res the same (such as looking at the page on a mobile device) and varying the amount of swapped offset. 39 pixels is too far to one side…40 is too far the other side.

Ugh…I hope all of that made sense.

#116944 Copied

Jack Richardson

Support staff

March 11, 2016 at 09:23

Hello,

Are you checking the site on mobile devices or resizing browser window?
Please check it on mobile devices and let us know the result.

Thank you.
Best regards,
Jack Richardson.

#116967 Copied

talonhead

Participant

March 11, 2016 at 10:06

Hey Jack. As said above:

I can’t even get it perfect by keeping the res the same (such as looking at the page on a mobile device)

So yes…viewed on a mobile as well as re-sizing a browser window.

#116979 Copied

Eva Kemp

Support staff

March 14, 2016 at 09:44

Hello,

Could you please specify what mobile device you’re checking in to compare it on our side?

Thank you.

Regards,
Eva Kemp.

#117241 Copied

talonhead

Participant

March 14, 2016 at 09:46

iPhone 6

#117242 Copied
Eva Kemp

Support staff

March 14, 2016 at 12:51
Hello,

Please try to replace the code in Custom CSS for mobile section from this:
```
.products-list .product .product-image-wrapper.hover-effect-swap .show-image {
    left: 39px !important;
}
```
to this:
```
.products-list .product .product-image-wrapper.hover-effect-swap .show-image {
    left: 2px !important;
}
```
Regards,
Eva Kemp.
#117305 Copied
talonhead

Participant

March 14, 2016 at 15:20

I’m not sure why you thought that would work? The image just gets more offset. It was set at 39…and even then it wasn’t correct.

#117333 Copied

Jack Richardson

Support staff

March 14, 2016 at 17:19

Hello,

Could you please show a screenshot what view of images you have on your side so we can compare it?

Thank you.
Best regards,
Jack Richardson.

#117365 Copied

talonhead

Participant

March 14, 2016 at 22:09

Sure…see enclosed iPhone screenshot.

Please, contact administrator
for this information.

#117413 Copied

talonhead

Participant

March 16, 2016 at 23:16

Hey guys. No progress on this issue yet?

#117743 Copied

Eva Kemp

Support staff

March 17, 2016 at 14:40

Hello,

Sorry for a delay.
We’ve made some changes. Please check your shop page now.

Regards,
Eva Kemp.

#117844 Copied

talonhead

Participant

March 17, 2016 at 15:21

Changes where? Looks the same ti me on both a mobile device and a re-sized browser on the desktop. Yes…I refreshed.

#117851 Copied

Eva Kemp

Support staff

March 17, 2016 at 17:34

Hello,

Have you changed WP admin credentials?
We can’t log in now.
Please give us correct login details.

Regards,
Eva Kemp.

#117876 Copied

talonhead

Participant

March 17, 2016 at 20:42

Yes…it has been changed since you accessed it last. New credentials posted.

Please, contact administrator
for this information.

#117908 Copied

Eva Kemp

Support staff

March 18, 2016 at 11:22

Hello,

Now we’ve removed this code http://prnt.sc/agqugu .
Please check swap option now.

Regards,
Eva Kemp.

#117975 Copied

talonhead

Participant

March 18, 2016 at 12:48

I guess that’ll work. It doesn’t quite fix it when the browser is re-sized down to a mobile scale (has a slight “hiccup”), but who does that anyway? On mobile it works as it should.

BTW…where did you remove the code at specifically? I noticed you removed a few lines in the Custom CSS for mobile as well.

Thanks!

#117987 Copied

Eva Kemp

Support staff

March 18, 2016 at 13:07

Hello,

The code was removed from “Custom CSS for mobile” section.

Regards,
Eva Kemp.

#117990 Copied

talonhead

Participant

March 18, 2016 at 13:16

So I guess you changed my 39px to 45px and took out the 2px line. Is that it?

#117995 Copied

talonhead

Participant

March 18, 2016 at 13:20

Something must have happened. Check out my Recently Viewed Products screenshot.

Please, contact administrator
for this information.

#117999 Copied
Eva Kemp

Support staff

March 18, 2016 at 14:50
Hello,

Please use this code in Custom CSS for desktop:
```
.sidebar-left .product_list_widget li {
   width: 100%;
}
```
Regards,
Eva Kemp.
#118015 Copied
talonhead

Participant

March 18, 2016 at 14:53

Can you tell me why we have to add code to “fix” issue now when it’s been working fine for quite awhile?

I had to add that code into Global as it was incorrect with mobile view as well. Works fine.

#118016 Copied

Eva Kemp

Support staff

March 21, 2016 at 10:11

Hello,

Perhaps some other code was causing the issue.
Is your problem resolved now?

Regards,
Eva Kemp.

#118207 Copied

talonhead

Participant

March 21, 2016 at 10:15

lol Not really the answer I was looking for, but all good. Close it up. Thanks. 🙂

#118208 Copied

Eva Kemp

Support staff

March 21, 2016 at 10:58

Hello,

You’re welcome.

Regards,
Eva Kemp.

#118219 Copied
Viewing 30 results - 1 through 30 (of 30 total)

The issue related to '‘Making List View Images Same Scale as in Grid View?’' has been successfully resolved, and the topic is now closed for further responses

Making List View Images Same Scale as in Grid View?

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection