Return to previous page

Horizontal and vertical images - by Danielberlin

This topic has 17 replies, 3 voices, and was last updated 6 years, 9 months ago ago by Rose Tyler

Danielberlin

Participant

September 12, 2018 at 10:56

Hello,

Unfortunately, we have not been able to automatically adjust horizontal and vertical images to the same height (see screenshot), depending on the format in which the image is stored, there is always something missing from the image. Can you help us?

https://www.awesomescreenshot.com/image/3606440/0039561a2bd99d2f37ff3e2ca20e81c7

Yours sincerely

#199353 Copied

16 Answers

Rose Tyler

Support staff

September 12, 2018 at 11:00

Hello,

Image size settings you can change via Appearance > Customize > WooCommerce > Product Images https://www.8theme.com/documentation/xstore/woocommerce/product-images/
I recommend to use a graphics editor and prepare product and category images (make them the same size) before uploading it to your media gallery.

Regards

#199354 Copied

Danielberlin

Participant

September 12, 2018 at 11:13

Hello again, many thanks for the quick answer.

Unfortunately the video is no longer available. With our previous template all images were displayed in the same size without being cut off. We have already tried all settings under Custum/Woocommerce, unfortunately there is always something missing from the image. And bring the pictures to the same size, does not work with portrait and landscape format pictures. Is there a possibility with CSS?

#199356 Copied

Rose Tyler

Support staff

September 12, 2018 at 12:05

Hello,

If you don’t want to crop images choose it in settings http://prntscr.com/inn6pf
And regenerate thumbnails using Regenerate thumbnails plugin to apply changes.

Regards

#199360 Copied

Danielberlin

Participant

September 12, 2018 at 15:34

Hello again, unfortunately it didn’t work either, we chose the setting and re-generated the pictures, but everything is the same as before.

#199375 Copied

Rose Tyler

Support staff

September 12, 2018 at 15:52

Hello,

Is this is what you are looking for https://prnt.sc/ktlbyg ?

Regards

#199380 Copied

Danielberlin

Participant

September 13, 2018 at 12:31

Hello again, yes exactly, but the pictures should be in the same height, the picture right is now smaller than the others.

#199417 Copied
Rose Tyler

Support staff

September 13, 2018 at 12:48
Hello,

To get this result http://prntscr.com/ktxmib you need to set these settings – https://prnt.sc/ktlbyg + add this code in Theme Options > Styling > Custom css:

.single-product .product-content-image img, .post-type-archive-product .product-content-image img{ min-height: 378px !important; } .content-product.product-inview .product-content-image img{ min-height: 293px; }

Regards
#199420 Copied
Danielberlin

Participant

September 13, 2018 at 14:35

Hello again,

we have placed the CSS code accordingly, changed the Woocommerce image settings and re-generated the images. Unfortunately the images are not displayed correctly. If we are in custom mode, the images are displayed correctly (see screenshot).

Please, contact administrator
for this information.

#199427 Copied

Olga Barlow

Participant

September 13, 2018 at 16:31

Hello,

Looks like your WP media files does not react to the WooCommerce Image settings. Can you provide us with FTP access to check this?

Regards

#199433 Copied

Olga Barlow

Participant

September 13, 2018 at 16:42

Check your images now. Is it ok for you?

Regards

#199434 Copied

Danielberlin

Participant

September 13, 2018 at 17:02

Hello again, yes we would like to leave that as it is, thank you very much for your help. Now we have the problem that the green header bar is missing on the start page in the mobile view (see screenshot).
If you look at the page on your smartphone, you won’t see any icons either.

Please, contact administrator
for this information.

#199438 Copied
Rose Tyler

Support staff

September 14, 2018 at 08:21
Hello,

Please add this code in Global custom css:

@media only screen and (max-width: 992px) { .main-header { background-color: #6f983b !important; } }

Regards
#199461 Copied
Danielberlin

Participant

September 14, 2018 at 09:04

Hello again, that didn’t work out.

Greetings

#199464 Copied
Rose Tyler

Support staff

September 14, 2018 at 09:11
Hello,

Please change the previous code to:

@media only screen and (max-width: 992px) { .header-wrapper .main-header { background-color: #6f983b !important; } }

Let us know the result.

Regards
#199466 Copied
Danielberlin

Participant

September 14, 2018 at 09:27

Thank you very much for your great help, other template manufacturers can take an example from it.

#199467 Copied

Rose Tyler

Support staff

September 14, 2018 at 09:44

You’re welcome!
Have a nice day.

Regards

#199469 Copied
Viewing 17 results - 1 through 17 (of 17 total)