0

I have to create a container that, on desktop, looks something like this. Notice the gaps between the image placeholders. This is desired:

enter image description here

On an md screen it would change to this, the gaps should disappear, the text should have 100% width, the top-right image slips under the text and fills out 100% width (that is already taken care of, by using <picture> to change images based on media max-width). However, the gaps should disappear:

enter image description here

I have read on several stackoverflow answers, that, in order to achieve the removal of the gaps, I have to add align-content: flex-start to my multi-line flex-container. However, there is something I'm missing, because as you can see in the jsfiddle I will link below, it doesn't remove the gap.

This is what I have come up with so far. I tried to recreate the structure (container-fluid etc.) as close to the structure I have to use: https://jsfiddle.net/pbLvna4m/3/

If you need more information, I will happily try to provide them.

Patrick Manser
  • 1,133
  • 2
  • 12
  • 31
  • I think it because your content just an image. Let's try to give `display: block` on `img` tag – Nizamil Putra Feb 16 '17 at 13:13
  • 1
    ... i'm speechless. thank you very much. please put it up as an answer, so I can choose it as the right one. – Patrick Manser Feb 16 '17 at 13:15
  • Heh, misread your question. I was trying to do the opposite: keep it consistent while you wanted to remove it. My preferred method of removing that space when the image is wrapped is by giving it `float:left`. @Michael_B: Nothing to back this up, but the idea of giving `` tags `display:block` makes me uncomfortable. :) – tao Feb 16 '17 at 13:34

0 Answers0