Stats Preview Card Solution + HTML + CSS + FlexBox + CSS GRID
Design comparison
Solution retrospective
Hello there! Check out my work and provide any feedback on areas I can improve on. Thank you
Community feedback
- @ZubairAbid101Posted over 1 year ago
Hello!!! 👋
Congratulations on completing the challenge! 🎉
There are some things that you can improve in the code,
- I noticed that you used the same styling for the
<html>
and the<body>
element in your CSS file. I advise removing the<html>
tag from your styling as this will not change the appearance of the design. - Try using the prescribed image given for each viewport. A simple way to do this is to create two
<img>
elements, one for the desktop and other for the mobile design. Set thedisplay: none
for the mobile design as default. Then using media queries set it todisplay: block
for the mobile design at the appropriate size. - Instead of creating a single media query, try making separate media queries inside each individual element in your CSS file.
- Try using
min-height: 100vh
on the<body>
element. This will give you more control over how the document behaves provided the height gets larger than100vh
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 helpful1@KamaniaPosted over 1 year agoThank you @ZubairAbid101. Let me make the changes you have suggested
0@VCaramesPosted over 1 year agoHey @ZubairAbid101, I suggest re-reading the sites guidelines as asking users the following "If you find this comment helpful do mark this as helpful and up-vote it..." is against the sites guidelines and can cause your account to get suspense/banned.
0@ZubairAbid101Posted over 1 year ago@vcarames I understand your concern and will change my comments accordingly, though I would like to point out that the guidelines don't explicitly restrict the use of such phrases. It merely advises against such an action. Regardless, thank you for pointing that out.
0 - I noticed that you used the same styling for the
Please log in to post a comment
Log in with GitHubJoin 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