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

Flexbox / Grid

Antony 210

@Antonator

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


Got some issues with responsive, but finally I could solve them. As always any feedback is welcome.

Community feedback

Vanza Setia 27,855

@vanzasetia

Posted

👋Hi Antony!

On both landscape and potrait on mobile view, it looks great! 👍 Good job for that!

I have some feedback on this solution:

  • For the stats, I recommend to use ul and for the companies div, I recommend to change it into li to wrap each stat.
  • For the purple overlay, I recommend to use background-blend-mode: multiply. The result will be more similar to the design.
  • You should never change the root font size. I recommend to leave the default to make sure that every device and browser will render the same size.

That's it! Hopefully this is helpful!

Marked as helpful

0
Anthony 355

@ACdev27

Posted

It looks like on desktop view the card gets too wide compared to the design.

With responsive design, you may want set a max-width on the card (not just width).

With max-width it will stop getting wide at some point you set, but still will shrink as browser window gets more narrow. Look at design file to match its width for your max-width.

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