Flex + CSS grid, spacing issue

Hi guys! I am stuck and will appreciate your help…
Trying to master flex and css grid.

I cannot understand why these items are assigned such a huge height: http://prntscr.com/ob0zum
The list items have huge vertical spacing, I first tried to position them with ul and li tags, then with article, and then explicitly set flex-basis but nothing helps…

Available online here: https://zelenskaya.github.io/experiments/

Do you have any idea? Thanks!

Hi zelenskaya,

The images in your container have quite a large padding-bottom. Could that be what you are looking for?


After removing the padding on the icons, if you want to align the icons vertically with the text you can use align-items: center; on the .devices_txt_container article selector.

Thank you guys! It helped!