Issue with `display: column` with an absolute positioned element

I need help! I'm trying to avoid using Masonry.js library bc I have a simple page for testimonials that works perfectly with display: column but I'm encountering an issue with the quote icon I set up with absolute position. Those svgs are not perfectly aligned in the second and third column. I recreated the issue in CodePen: https://codepen.io/Daniele-Longo/pen/KKJvNoG. I could target the div that is in the top, but I was hoping for a more dynamic solution since my user may have to add or remove testimonials .container > div:nth-child(4) {.icon { transform: translate(0, -0.8rem);}}
No description
4 Replies
MarkBoots
MarkBoots12mo ago
don't know exactly why that happens. it has to do with the content flow of the breaking columns somehow. probably bacause top/left positions are creating space that are not resolvable for the columns layout maths. i did figure out that you could use translate instead of the top en left position
No description
dlongodev
dlongodev12mo ago
Cool! I'm going to give this a try @MarkBoots Thank you sooo much! transform: translate(-100%, -75%); was the proper way to do it.
MarkBoots
MarkBoots12mo ago
you could even consider putting the quote in a ::before element. that way you don't have to add the .icon div in each card https://codepen.io/MarkBoots/pen/wvNqJOo
dlongodev
dlongodev12mo ago
I can take a look, in my real project we're using Material Symbols font as an icon, so that would mean I would have to really add the svg.
Want results from more Discord servers?
Add your server