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);}}
4 Replies
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
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.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
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.