Stats preview card component using Flexbox

Solution retrospective
Any and all feedback are welcome! Here are some points I'd like to bring up:
-
I used VoiceOver in my iPhone for accessibility testing, and found that the title breaks up because of the highlighted span (insights). To fix it, I used the
role="text"
trick as seen in this article. I also did the same thing to the list items. What are your thoughts on this? -
For the header, I decided not to use an
img
tag and to just implement the image as a background in the CSS. This way I can switch between the mobile and desktop headers using media queries. Is this approach recommended in the real world? -
I used
background-blend-mode: multiply
to achieve the duotone effect in the image header, although I still didn't quite get the design accurately. Any tips on how to improve this bit?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @devjakov
when the viewport width starts going over 2000px or under 1300px your card sizing starts changing, this is a problem for someone with 1440p screen
also why have three seperate media queries for one resolution? you can put it all under one
Cheers bro :D
Marked as helpful
Join 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