- This topic has 11 replies, 2 voices, and was last updated 1 year ago by
David.
-
AuthorPosts
-
October 19, 2018 at 5:59 am #705004
Alberto
Hi.
How would you have to configure GP so that the woocommerce images have the same height, regardless of the size of the images?
Thank you in advance.
GP Premium 1.7.2October 19, 2018 at 6:38 am #705029David
StaffCustomer SupportHi there,
can you link me to the Site? you can edit the original topic and use the Site URL for privacy.
We may be able to use some CSS to make this happen. But ideally it is better to use images that are all the same aspect ratio.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 19, 2018 at 6:41 am #705032Alberto
Hi.
I just edited the url of the site.
Thanks since now!
October 19, 2018 at 7:17 am #705076David
StaffCustomer SupportOK, so try this CSS:
@media (min-width: 768px) { .inside-wc-product-image { width: 100%; } .woocommerce ul.products li.product a img { height: 200px; /* adjust height */ object-fit: cover; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 19, 2018 at 7:21 am #705078Alberto
Thank you! It worked perfectly!
Can the height of the titles also be equal?
Thank you in advance.
October 19, 2018 at 7:23 am #705083David
StaffCustomer SupportTry this:
.woocommerce ul.products li.product h2 { line-height: 2.5ex; height: 7.5ex; overflow: hidden; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 19, 2018 at 7:25 am #705086Alberto
Thank you! It worked perfectly!
October 19, 2018 at 7:26 am #705089David
StaffCustomer SupportAwesome 🙂 Glad i could be of help.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 13, 2019 at 12:51 pm #983348Raul
Hello David, I am trying to to the same Alberto asked, but I want the images centered horizontally. The CSS seems to affect the magnifier icon position as well as the product gallery thumbnails.
This is the code I am using:
@media (min-width: 768px) { .inside-wc-product-image { width: 100%; } .woocommerce div.product div.images img { height: 700px; /* adjust height */ width: auto; margin: 0 auto; } } .woocommerce div.product div.images .woocommerce-product-gallery__trigger { margin: 0 auto; }
A sample of a long vertical image: http://35.232.201.230/~suzanne2/shop/publications/embodied-fantasies-from-awe-to-artifice/
A sample of a gallery with 3 images: http://35.232.201.230/~suzanne2/shop/artworks/remote-sensing/remote-sensing-01/Note images get distorted… What do you recommend?
Thanks
August 13, 2019 at 4:57 pm #983503David
StaffCustomer SupportHi there,
its best to avoid the CSS for now, the key thing with Woocommerce images is:
1. Original Image should be large enough for your Single Product Magnified image around 1.5x to 2x the Main Image unzoomed.
2. The Customizer > Woocommerce > Main Image width should be equal to the Container width.
2.1 The Container width is set as a % in Customizer > Layout > Woocommerce > Product Image Area Width – currently yours is 60% of the Page Container width which is set to 1400px. So the Main Image Width should be 840px in your current set-up. This means your original image needs to be larger ( refer back to point 1 )Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 24, 2021 at 2:19 am #1795646Kieran
Thanks for this code David, simple and works. I changed: object-fit: cover; to object-fit: contain; which suited my needs.
May 24, 2021 at 3:13 am #1795703David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.