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 Updated

Amanβ€’ 630

@AmanGupta1703

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 would like to hear your feedback! 😊

Community feedback

Davidβ€’ 8,000

@DavidMorgade

Posted

Hello Aman, great job getting the solution for the challenge, congratulations!

If you don't mind, I would like you to give a little tip regarding your media queries.

  • It seems that you are using display: none to hide your main and rendering a new main for mobile, instead of that just try to style your already structured html file to get it to work on diferent sizes, you can try for example using a Mobile first approach (building first for mobile and then for desktop).

  • Also you are using a @media(max-width: 375px), this will only target sizes from 0 to 375px, it will miss the mayority of mobile screens, try setting up it until @media(max-width: 768px) instead, this will target all kind of mobile screens, and shift correctly on desktop mode!

Hope my feedback helps you!, if you have any question, don't hesitate to ask! Good job!

Marked as helpful

1

Amanβ€’ 630

@AmanGupta1703

Posted

@DavidMorgade Thank you! 😊

1
Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘ΎHello Aman, congratulations for your new solution!

Great solution and great design, something you can improve to get closer to the challenge output is the font-size and the image color. The heading h1 is around 32/36px and the paragraphs 16px/18px.

To have the same effect of the challenge on the image making it purple usemix-blend-mode:multiply with an opacity around 80%.

✌️ I hope this helps you and happy coding!

Marked as helpful

0

Amanβ€’ 630

@AmanGupta1703

Posted

@correlucas Thank you! 😊

0
miland sharmaβ€’ 190

@milandsharma

Posted

Awesome webpage brother

1

Amanβ€’ 630

@AmanGupta1703

Posted

@milandsharma Thank you! 😊

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