# Pinegrow Flex Display wrong

**URL:** <https://forum.pinegrow.com/t/pinegrow-flex-display-wrong/481>\
**Category:** General\
**Created:** [December 8, 2016, 6:55pm UTC](https://forum.pinegrow.com/t/pinegrow-flex-display-wrong/481 "2016-12-08T18:55:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vanheber](https://avatars.discourse-cdn.com/v4/letter/v/da6949/32.png) [@vanheber](https://forum.pinegrow.com/u/vanheber)\
**Post date:** [December 8, 2016, 6:55pm UTC](https://forum.pinegrow.com/t/pinegrow-flex-display-wrong/481/1 "2016-12-08T18:55:38Z")

</div>

Hi,  
When I use display:flex in a div with an image inside (img), the preview distorts image size! Look! The div container has display: flex; justify-content: center; align-items: center;  
css rules. Plus css filters don´t work too into Pinegrow

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/284f4e8786b293d03649283853fc848506d48681.png)

---

<div class="post-metadata">

**Author:** ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)\
**Post date:** [December 9, 2016, 9:22am UTC](https://forum.pinegrow.com/t/pinegrow-flex-display-wrong/481/2 "2016-12-09T09:22:19Z")

</div>

Stalking this for a while now and am not sure how to help. I think this has nothing (or at least not much) to do with Pinegrow, its a general problem of images in a flexbox parent DIV being stretched. So one question would be:

Is it cross-browser wide? If so - did you set the browser-vendor prefixing correctly?

Cheers

Thomas

---

<div class="post-metadata">

**Author:** ![vanheber](https://avatars.discourse-cdn.com/v4/letter/v/da6949/32.png) [@vanheber](https://forum.pinegrow.com/u/vanheber)\
**Post date:** [December 9, 2016, 10:38am UTC](https://forum.pinegrow.com/t/pinegrow-flex-display-wrong/481/3 "2016-12-09T10:38:55Z")

</div>

Well, maybe the html engine of Pinegrow is outdated, because Edge and Chrome render the page correctly. I see only some issues with Firefox, that changes scale of images! So, I think that is a problem in internal Pinegrow HTML render.  
Sorry for my english.

---

<div class="post-metadata">

**Author:** ![Terry44](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/terry44/32/175_2.png) [@Terry44](https://forum.pinegrow.com/u/Terry44)\
**Post date:** [December 12, 2016, 3:56am UTC](https://forum.pinegrow.com/t/pinegrow-flex-display-wrong/481/4 "2016-12-12T03:56:12Z")

</div>

I would have to see your code. The image distortion only happens when you are not specifically telling the browser what the size is for the image, it should be static numbers for width and height.

If you are seeing distortion in other browsers then I think the problem is not Pinegrow and it is showing you that there is indeed a problem somewhere with your css and or html.

For dynamic page flows images should use break points and instead of just changing the dimensions to resize the image you should swap the images out with the correct sized image. This does mean creating multiple versions of your images.

---

<div class="post-metadata">

**Author:** ![vanheber](https://avatars.discourse-cdn.com/v4/letter/v/da6949/32.png) [@vanheber](https://forum.pinegrow.com/u/vanheber)\
**Post date:** [December 12, 2016, 7:45pm UTC](https://forum.pinegrow.com/t/pinegrow-flex-display-wrong/481/5 "2016-12-12T19:45:40Z")

</div>

Hi, I discovered that Pinegrow doesn´t understand the rule align-itens:center (related with flex container). this cause the distortion.

---

<div class="post-metadata">

**Author:** ![cricket346](https://avatars.discourse-cdn.com/v4/letter/c/58956e/32.png) [@cricket346](https://forum.pinegrow.com/u/cricket346)\
**Post date:** [January 28, 2017, 8:17pm UTC](https://forum.pinegrow.com/t/pinegrow-flex-display-wrong/481/6 "2017-01-28T20:17:55Z")

</div>

I’d really like to see flexbox incorporated into Pinegrow kind of the way that Bootstrap columns are.