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 component with CSS Grid

Martins 50

@RafaelMartins77

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


i need help with the responsive part, thanks for your help; :)

Community feedback

@benjoquilario

Posted

Hi! Martins, great job on finishing this one, it looks good.

some suggestion to improve your code and responsiveness:

I did some changes in dev tools:

  • You need to change the grid-template-column 1fr 1fr value into fraction here the link to understand more about grid fraction. grid fraction.
  • you need to set your main width:100% and then add max-width: 876px so that it will response when the viewport is 876
  • add another 100% to your .image class background-size: 100% into background-size: 100% 100%
  • Use unordered list <ul> for .subtitle. HTML lists are used to present list of information in well formed and semantic way.

Overall you did well, Hope this help!

cheers, benjo

Marked as helpful

1

Martins 50

@RafaelMartins77

Posted

@benjoquilario Thank you for the tip;)

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