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
Request path contains unescaped characters
Not Found

Submitted

Responsive page of stats card vanilla css

nachoNota 300

@nachoNota

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
solvman 1,670

@solvman

Posted

Hi @nachoNota 👋

Congratulations on completing the project! 🎊 Your eye for sizing and typography is excellent!

However, your design needs more responsiveness. Your design is not responsive to fluid changes in viewport width. It stays with a fixed size width and starts having clipping issues at around 925px wide and smaller to almost 376px (right before mobile layout), where it becomes practically unreadable. The hard set width and height of your container cause all of that. Remember, HTML documents are very responsive out of the box; try not to "stay on the way" of it by setting the fixed sizes if you don't have to. A good approach is to utilize min-width/max-width (min-height/max-height)to control the absolute boundaries of a container rather than hard setting the width or height. I suggest you check the following:

Another suggestion is to take some time and look at how others approached the same project. What tricks and tools did they use? You can always return to the challenge and check out the challenge page.

Otherwise, very well done! 🤩 👍

Marked as helpful

0

nachoNota 300

@nachoNota

Posted

@solvman yeah i knew i had that problem but i submitted it anyways, then it appeared to me those videos that you recommend and i could fix it, thanks for the comment.

1
P
solvman 1,670

@solvman

Posted

@nachoNota Very well done! 🎉 That is the best way to learn, through practical implementation. 👍I am glad my comments were useful to you! 🫶

0

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