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:

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:

1 Like

Hi! I really appreciate your help with this. I tried it and it worked, but I’m trying to use this idea for another grid and it isn’t working :frowning: I took my idea a little further and added more squares. It’s almost the same but nothing I do works to make it responsive. The only way to make it work is to set the pixel value, and then it is not responsive. Same issue I had earlier :frowning:

1 Like