For the clock icon before 3 days left, I can't figure out how to align it vertically with the "3 days left" text.
@ianbuen
Posted
I think for the .time class, you could either try to add display: 'flex' and align-items: 'center', or adjust a bit of top padding or margin for .time::before. I'd test it myself first, but I'm yet to be back at home on my PC.
Marked as helpful
@ryanthayes
Posted
That gave me an idea to try. I had been trying to change the main element NOT the pseudo element. I was able to fix by adding vertical-align to the pseudo element:
.time::before { content: url(images/icon-clock.svg); padding-right: .5em; vertical-align: middle; }
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
