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-code

@programmer-shazid

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


stats preview components

Community feedback

@pikapikamart

Posted

Hey, great work on this one. Layout in desktop is good, just missing the color overlay. The mobile view however is not and issue in resizing/responsiveness.

Suggestions would be that:

  1. On the body tag, you may NOT want to use width: 80%, use that in the card selector. The body should always get the whole viewport (as far as I know), also adding justify-content: center on your container selector will make the card centered properly.

  2. Adding more padding to the block selector and change the text-align: center to text-align: left or just remove the text-align.

  3. To get that purplish-effect, since you are not using any background-image, you can just add a background-color: rgb(170, 92, 219) on the cart-img-part selector and the image inside it, you may want to add opacity and tweak it until getting the desired color. You can also change the background-color that I mentioned to be more darker.

  4. Lastly, on your part, make sure to make the layout is responsive. If you inspect it in dev tools, you will see that your layout is getting hidden by the browser. Make it responsive. Also do not just wait for the 375px mobile, it is just design, not breakpoint. Adjusting it to a higher breakpoint will be really good.

Goodluck on the responsive part and still, good job on this one^

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