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

HTML, CSS

@amithjolly

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
Grace 27,950

@grace-snow

Posted

Hi

I think this needs a little more work to be honest. I recommend you open devtools, maybe on the side of your browser, resize and inspect elements to see what happens. You can definitely remove some of the divs and I think you need to rethink the table layout being fixed.

Other suggestions:

  • As you've gone desktop-first with this, your media query needs to go up to the size where there is space for the desktop layout to start. 375px is way too early. Your desktop layout can't fit on the screen at 376px for example, it needs to go up to something like 700px (at a guess)
  • Add mix-blend-mode multiply to the image
  • Try to get the font sizes, font-families, font weights, padding and max-width much closer to the design
  • If including alt text, it absolutely cannot say stuff like IMG it needs to be a proper readable description - how would you describe it to someone if the image didn't load
  • I'd recommend flex instead of table layout for those stats, but it's up to you. Whatever you choose to do though, text must never be in a div or span alone, always a meaningful element
  • consider adding a basic reset to the start of your stylesheet. You are relying a lot on default browser styles at the moment (e.g. margin on the body - It's usual to strip that out and add padding either there or a layer down in the dom to prevent content hitting the sides of the screen)

I hope this helps, good luck

0

@amithjolly

Posted

Thank You so much, Grace. It would definitely help me a lot in getting better.

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