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

Stats preview card component

lastiwan89 260

@lastiwan89

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


write me review for my css and also html

Community feedback

@ZubairAbid101

Posted

Hello!!!

Congratulations on completing the challenge!

There are some things that you can improve in the code,

  • It seems that the <img> element does not appear for layouts between the desktop and mobile layout. I advise creating two <img> elements, one for desktop and the other for mobile design. Then set the display: none for the mobile <img> element. Using media queries set the display: block when the screen size is that for a mobile layout.
  • Try to use media queries within each element rather than creating a singular media query for all the elements.
  • Rather than using height: 100vh try using min-height: 100vh.
  • CSS Grid is a good way to format the layout so to speak but for single column or single row layouts try using display display: flex

I hope you find this comment helpful!

Did you know that there's a mark as helpful and an up-vote option?

There's even a Follow button!!!

Happy Coding!!!

Marked as helpful

1

lastiwan89 260

@lastiwan89

Posted

maybe in the next project i fix it. thank you @ZubairAbid101 You can see my solution here: https://www.frontendmentor.io/solutions/product-preview-card-component-0BveRRibkW

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