Responsive Article Preview Component Using CSS Flexbox and Grid

Started this project on the 2nd of January 2026 and completed it today 10th January. I'm proud that I never gave up despite the frustrations that came with solving the challenge.

Well, I thought I have mastered CSS but this project proved that wrong. I learned a lot and I'll be incorporating everything I've learned in my future projects.

Making the mobile tooltip take the full width without messing up spacing. I solve that by wrapping the content of the article in a div but making the wrapper invisible on mobile.

Making the tooltip always stay above the share icon on desktop. I got help from Claude and solved it by making the content wrapper the reference point to position the tooltip. So, I gave it position of relative while the tooltip takes absolute positon. Also, I made overflow to be visible on desktop to allow the tooltip to float. This made it easier to position it and make it fixed on the share button no matter the screen size or width of the device.

Locking heights to prevent cards from jumping on click. I overcomed this by wrapping the author block and sharebox/tooltip in a footer div and giving it a fixed height, so they inherit the footer's height.