Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

stats-preview-card-component-main

@Mazou2K21

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi im down for suggestion.

Community feedback

hardy 3,660

@hardy333

Posted

hey, nice solution, on desktop screen size card looks very good, it's good to see that you don't have accessibility and html validation issues. But there are some problems on mobile screen sizes : Cards' content starts overflowing, card gets scrollbars and so on.

I think main problem for your css which is a reason for scrollbars and other problems as well is incorrect unit values: don't use vh unit all the time instead use percentages, if you want your component to have some fixed width use width property and after that use max-width: 100%; those to property on combination will give you flexibility and your components will never start overflowing from their parent containers/components...

Good luck.

Marked as helpful

4

Please log in to post a comment

Log in with GitHub
Discord logo

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