- This topic has 10 replies, 4 voices, and was last updated 7 years, 6 months ago by
Tom.
-
AuthorPosts
-
July 14, 2017 at 5:55 am #349329
Fernando Díaz Gascón
Hello,
I like on product page to have no distractions, so I put the setting “content (no sidebars)”. After doing this, I see that the image is too high, resulting it is not alligned with the information (short description, button) on the right. Here it is an example of the result:
http://cafeziryab.com.mialias.net/tienda/alimentacion/test-product/
(to enter in the web: user: cafezi383; pass: 9eF4Gzmr)
If the screen is wider, photo is bigger, so here I have a problem.
I am thinking two possible solutions:
1) Put space at right and left sides, but only in product page and only from a determined screen size.
2) Limit the image size from a determined screen size.I have two questions:
– What do you think is a best solution for my problem (taking into account more possibilities than the ones I’ve thought).
– How can I implement the appropiate solution?Thanks in advance
July 14, 2017 at 8:47 am #349408Leo
StaffCustomer SupportHi there,
Head to Dashboard > WooCommerce > Settings > Products > Display > Product images then you can set the size in there.
July 14, 2017 at 10:24 am #349462Tom
Lead DeveloperLead DeveloperYou’ll likely need to do something like this: https://generatepress.com/forums/topic/product-photo-margin/#post-139183
July 17, 2017 at 9:32 am #350693Fernando Díaz Gascón
Thank you Tom, with your help I am near the solution, but I still dont get the correct appearance.
If I use the percentage, the image shows very small for narrow screens, so I have used max-width. Exactly, this code:
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { max-width: 390px; }
You can see the result here: http://cafeziryab.com.mialias.net/tienda/alimentacion/test-product/
(to enter in the web: user: cafezi383; pass: 9eF4Gzmr)
You can see that the photo is going to the left side (or better, I would say that the right margin goes bigger). With this solution there is too much space between the photo and the content summary.
I want the photo near the right side, next to the content summary. But I dont know how.Thanks for any help.
July 17, 2017 at 10:51 am #350740Tom
Lead DeveloperLead DeveloperIt’s best to use a percentage, and only apply it to larger screens:
@media (min-width: 769px) { .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { width: 30%; } .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary { float: right; width: 65%; } }
July 17, 2017 at 11:38 am #350761Fernando Díaz Gascón
Great, but the problem remains. The image is floating left. I want the photo near the right side, next to the content summary.
Thanks in advance.
July 17, 2017 at 12:07 pm #350775David
StaffCustomer SupportSorry to butt in – but have you thought about dropping the CSS and just cropping your image so it doesn’t have as much white space around it? This would effectively make the image larger in the first place. Excuse me if i have missed the point.
July 17, 2017 at 12:26 pm #350783Fernando Díaz Gascón
It could be a good idea, thank you David, but I have hundred of images. It would be a very hard work. And it would not solve the whole problem.
I returning to the problem: the problem remains. The image is floating left. I want the photo near the right side, next to the content summary.
Thanks in advance.
July 17, 2017 at 8:08 pm #350947Tom
Lead DeveloperLead DeveloperI just edited my CSS above: https://generatepress.com/forums/topic/product-image-size-in-woocommerce-product-page/#post-350740
July 18, 2017 at 11:36 am #351307Fernando Díaz Gascón
With your code, both (image and summary) go left and it leaves too much margin at the right side. I have been playing with margin-left for the image and both percentages and the result does not look bad. What do you think about this solution? This is the code:
@media (min-width: 900px) { .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { width: 30%; margin-left: 15%; } .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary { float: right; width: 45%; } }
July 19, 2017 at 9:33 am #351758Tom
Lead DeveloperLead DeveloperDoesn’t look bad at all 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.