Consistent distances between two elements in a grid
*Sorry for the new thread, I couldn't add new images to the old OP.
------------
So I'm trying to make one element in a grid start a consistent distance from another. For example in the images with the snowboarder I'd like the blue background to cut through the image about halfway up (image 1)
The problem comes when the grid expands vertically for larger screen sizes. As the grid expands, each row expands, and if both elements don't start in the same grid row, the distance between them increases. (image 1 to image 2)
Codepen:
How it currently behaves: https://codepen.io/nwoodward/pen/zYXqKeZ
How it should behave when resizing vertically: https://codepen.io/nwoodward/pen/bGJpwZP?editors=1010
Is this even possible? Or should I look to have both start in the same row and then translate one of them?
Thanks
------------
So I'm trying to make one element in a grid start a consistent distance from another. For example in the images with the snowboarder I'd like the blue background to cut through the image about halfway up (image 1)
The problem comes when the grid expands vertically for larger screen sizes. As the grid expands, each row expands, and if both elements don't start in the same grid row, the distance between them increases. (image 1 to image 2)
Codepen:
How it currently behaves: https://codepen.io/nwoodward/pen/zYXqKeZ
How it should behave when resizing vertically: https://codepen.io/nwoodward/pen/bGJpwZP?editors=1010
Is this even possible? Or should I look to have both start in the same row and then translate one of them?
Thanks
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
