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, 10 months ago ago by Eva Kemp

  • Avatar: talonhead
    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
    Avatar: Jack Richardson
    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
    Avatar: talonhead
    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
    Avatar: Jack Richardson
    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
    Avatar: talonhead
    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
    Avatar: Jack Richardson
    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
    Avatar: talonhead
    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
    Avatar: Jack Richardson
    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
    Avatar: talonhead
    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
    Avatar: Eva
    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
    Avatar: talonhead
    talonhead
    Participant
    March 14, 2016 at 09:46

    iPhone 6

    #117242 Copied
    Avatar: Eva
    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
    Avatar: talonhead
    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
    Avatar: Jack Richardson
    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
    Avatar: talonhead
    talonhead
    Participant
    March 14, 2016 at 22:09

    Sure…see enclosed iPhone screenshot.

    Please, contact administrator
    for this information.
    #117413 Copied
    Avatar: talonhead
    talonhead
    Participant
    March 16, 2016 at 23:16

    Hey guys. No progress on this issue yet?

    #117743 Copied
    Avatar: Eva
    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
    Avatar: talonhead
    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
    Avatar: Eva
    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
    Avatar: talonhead
    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
    Avatar: Eva
    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
    Avatar: talonhead
    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
    Avatar: Eva
    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
    Avatar: talonhead
    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
    Avatar: talonhead
    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
    Avatar: Eva
    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
    Avatar: talonhead
    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
    Avatar: Eva
    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
    Avatar: talonhead
    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
    Avatar: Eva
    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

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Skate – WooCommerce Theme
lazy-placeholder
Marseille 02 – WordPress WooCommerce Theme
lazy-placeholder
Landing Watch – WordPress WooCommerce Theme
lazy-placeholder
Marseille04 – WordPress WooCommerce Theme
lazy-placeholder
Gym Store – WordPress WooCommerce Theme
lazy-placeholder
Business 02 – WordPress WooCommerce Theme
lazy-placeholder
Zoo Shop – WooCommerce Theme
lazy-placeholder
Engineer Store – WordPress WooCommerce Theme
lazy-placeholder
Kidsstore – WooCommerce Theme
lazy-placeholder
Industrial Power Tools Store – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.