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

Responsive Stats Preview Card design

@simplyJC

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


Any feedback will do. Thanks.

Community feedback

@pikapikamart

Posted

Hey, awesome work on this one. The desktop layout looks fine, just a little bit shorter. For responsiveness, if you go at 900px upwards, you will notice that the site hides the content and creates horizontal scrollbar. For mobile state, it looks fine but the top part is being hidden by the screen's ceiling.

Here are some suggestions for the site:

  • Avoid using height: 100vh on a large container like the .wrapper container as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • For the image, you can use a more descriptive alt on it if you find the image meaningful. Right now, the text office is too broad on what is image's content is all about.
  • For the text-content of the site, the text-align should be set to left because right now, texts are centered.
  • For the .card__details, if you look at the content, those could be "list" of information about the company website, therefore you can use ul` tag on it.
  • Since I suggested ul, those span would be li and also, using just a plan span to wrap a content is not that great, you should always put content inside of a meaningful element.
  • Lastly, just addressing the responsiveness issue if you go around at 900 px upwards^^

Aside from those, great job again on this one.

Marked as helpful

1

@simplyJC

Posted

Thank you for your feedback. I also did notice that too whenever I am on mobile view the top part is being capped. I will definitely follow your suggestion. The UL elements , I didn't even realize that I could use ul tag and li to it. Nice one. I see your from ph as well. Galing! Salamat Haha

1

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