Design comparison
Solution retrospective
It was my first time using an API, it was really fun. Any feedback is very well received.
Community feedback
- @AgataLiberskaPosted over 2 years ago
Hi! Looking good and working just fine :) Definitely check out the accessibility report - the <main> landmark is missing, and the button we're using to update needs some type of labelling to be accessible. I'd also advise to add width and a height whenever you add an img - to avoid layout shifts.
One probably very nitpicky thing - when I reload the card, the button and the quote marks keep moving up - this only lasts a fraction of a second but can look a bit like a glitch. I would suggest setting up a min-height for your advice-txt container so there always is some space there - even if it's just the height of a single line of text (I'd personally go for two lines and center vertically if it's just one line but that's your call). This layout shift wouldn't really be an issue because it happens after a user interaction but I think with some min height it would look more polished.
Hope this helps :)
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
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