Overlapping containers Dilemma..

šŸ‘‹ Hi everyone, I have encountered a bit of a dilemma when creating a section containing overlapping container blocksā€¦ In my project I have created the overlap using ā€œtranslateY: 15vw;ā€ however I encounter extra spacing at the bottom of the section.. (seemingly because the displaced space where the second section is translated from doesnā€™t seem to go away) Would appreciate hearing any thought you guys may have on navigating this issue.. This is desired outcome & this is also how my current project looksā€¦ My versionā€¦ https://free.olithompson.dev/?post_type=bricks_template&p=3217&bricks_preview=1739016009
No description
4 Replies
Chris Bolson
Chris Bolsonā€¢2mo ago
That link isn't working. Rather than using translateY you could use a negative top margin, this will pull the whole element up and not create that gap. There are probably other/better ways but this would be a quick fix.
Oli_T
Oli_TOPā€¢2mo ago
Ingenious!! I will give that a try šŸ‘
Alex
Alexā€¢2mo ago
For overlapping elements if usually go with a grid solution, since that always feels cleaner if it needs to be overridden at different sizes.
#container {
display: grid;
grid-template-rows: 1fr 15vw 1fr;
& img {grid-row: 1 / 3}:
& form {grid-row: 2 / 4};
}
#container {
display: grid;
grid-template-rows: 1fr 15vw 1fr;
& img {grid-row: 1 / 3}:
& form {grid-row: 2 / 4};
}
I'd also avoid using vw units for vertical spacing, since on an ultra wide monitor the form will be far higher up, which I doubt is a desirable result.
į¼”ĻĻ‰Ļ‚
į¼”ĻĻ‰Ļ‚ā€¢2mo ago
i wouldn't use viewport units for this, at all im on a phone that's 10:16, or something then, i go to my 1080p pc display that is 16:9 that 15vw will be tiny on my phone and super large on my pc

Did you find this page helpful?