I am having an issue with the grid height of my new website and can’t figure it out since weeks. As you can see on lydiadietsch.com, there are some empty pixels below the video (3rd grid element) which should not be there. I managed to have that video in the grid with the correct aspect ratio as I want it to be, and how it actually is: 4:3. I did that using HTML Embed, and it works fine across devices. But why does it add a few pixels to the bottom of all grid elements? It does not only cause these empty pixels below the video, but also forces other images to fill up the whole height, which then isn’t 4:3 anymore.
Webflow support helped already, showing me that the video is actually the problem:
But the problem isn’t solved with that, so I am trying to find help here.
@mww: You’re my hero today, that has done the job! Thank you so much!
Last issue I have is that my color that appears on hover doesn’t fully cover the video, see screenshot below. Is there a simple solution? But probably nobody looks as close as I do…
@mww: I realised this solution doesn’t work on mobile where there’s only one item per row. Now I went back to my old option for mobile only. But I had the pixel issue again. I found a quite complicated solution, adding paddings and margins of 5 pixels, creating new classes etc. It is still not perfect, because my color that appears on hover is 5 pixel too high (on top). Ideally I could just stay with your solution on mobile also, but how can I avoid it to be ignored by other elements (it appeared in the background, mostly covered from the next grid item)?
