Hi y’all, I’m creating a layered div and image in a grid system. I have this look built out as an image, but I now would like to move on where the filled-in square div and the layered image are independent of each other. Some problems I’m running into:
- Div won’t stay as square responsively.
- Image and div don’t responsively size together.
- Can’t get the picture to lay on div correctly.
I’ve been on the forum for a while and watched a lot of videos, and I’m not sure what I’m doing wrong. I made the div 40vw,40vh, and made the image relative floating to the right.
All of the images with gradient boxes are the image ones I imported. The last one with the solid green is the one I’m trying to replicate with the div and image.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)