Faruk Abdulganiyu• 380
@faruking
Posted
Nice job. What I can add is that you change the width of the card(line 27 css) to 90% to get it closer to the design.
1
Submitted
Mobile first stats preview card using flexbox & media query
why-not-phoenix• 90
@why-not-phoenix
Design comparison
Solution retrospective
Hey guys,
Here's my solution for the stats preview card.
- Would've felt better making the side image a
background-imagebut couldn't figure out the right blend with thebackground-color. I'd appreciate tips on how to mix images and colors. - Main might look terrible on some devices, I tried fixing that, what do y'all think I could've done better?
- Wasted a lot of time trying to get the right dimensions. Is there an easier way of getting dimensions that fit?
My code might be messy, I'd appreciate any tip on optimization and better arrangement. Generally, I just need an assessment on these guys. Thanks for taking the time to help.
Community feedback
Vanza Setia• 27,835
@vanzasetia
Posted
Hi again! 👋
Good job on this challenge! 👏 It looks similar to the design (judging from the design comparison).
Regarding your questions.
- You have done a great job with the image overlay. So, from me, there's nothing to fix since it already looks the exact same as the design. Great job! 👍
- Don't change the
htmlfont size.- It makes the card looks small on mobile view.
- It can cause huge accessibility implications for those users with different font sizes or zoom requirements.
- If you are using a CSS framework, it can cause a lot of problems. All the sizes would be changed.
- I recommend keeping it simple. So, the initial styling is a one-column layout and then uses media query to make the card has two columns. Currently, making the card as two columns on
1350pxwidth is a little too late. Also, there's no need formax-height.
For the m styling, you can make the "m" for "12m+" be uppercased on the HTML. It's just a single letter so I don't think it would cause any issues even if the screenreaders pronounce it as the letter "m".
The statistic number should not be a heading. Just, use strong or use span and then make it bold with CSS.
Hope this helps.
1
Please log in to post a comment
Log in with GitHub
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