0

I have a woocommerce store and all of my product images are with flexbox and align items in mid. I install a plugin which changes the picture on hover, in this class, the align don't work, it stretches my picture. But the main picture is not stretch

I made display: flex height: 320px align-items: center justify-content: center

You can see all here: http://fistukids.de/shop/

Just hover on a picture, then you can see it aligns on top

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Lukas Kollin
  • 9
  • 2

1 Answers1

0

I think you want it vertically.

With flexbox you do it with: 

flex-direction: row/column

In your case it would be column. Hope I understood you right.

Christopher
  • 59
  • 10
  • yes, i want it to align vertically like the main picture. but also flex-direction doesnt work for me on the second image class. do you testet it in the inspector? – Lukas Kollin May 26 '18 at 17:17
  • Sry my internet is slow, so i can't help you much. When I get home, I take a better look. I just made this answer, because this is how you align it vertically. – Christopher May 26 '18 at 17:24
  • cool. thanks bro. i have 320px height viewport and the first image already works with justify-content. only the second image on hover has this problem. would be nice if you check it later – Lukas Kollin May 26 '18 at 17:33