Streaming live at 10am (PST)

Grid is overlapping because of relative / absolute position where I don't want it to

Hello! :slight_smile:

I need help with my grid, I’ve been struggling with it for ages! I finally got the animation working how I want it (when you hover then the images are replaced by new ones) and now my problem is responsiveness.

So I have a div with 4 different images inside it on each grid square, which animate to show once hovered on the correct square. I’ve set the div container to relative and the images inside to absolute so that they are all in the same space. This would be fine, except that I have another row under it. First it was taking up the same space as the row above, so I figured out that I need to set a value to the squares in order for my 2 rows to be visible.

I want my rows and colums to take up the whole space and have a nice even 10px in between them The only way I could figure out how to resolve my issue is to set a pixel value, I can’t seem to make viewport widths or heights or anything work. I really don’t like this solution visually. It’s not very responsive. Any insight?

PS. I noticed that with an animation on a read only link, you need to click preview a couple times before it works…


Here is my site Read-Only: https://preview.webflow.com/preview/test-cf2569?utm_medium=preview_link&utm_source=dashboard&utm_content=test-cf2569&preview=0b5e87f673737ec39ac7305c7f024ea2&mode=preview

Hi - thanks for sharing :slight_smile:

I think it is good idea to attach an image that shows what you are trying to achieve.

Ok, this is what it looks like in my browser

and I would love for it to look like this:

Hi @MaddisonHarder - Thanks for sharing :slight_smile: