Design comparison
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
COMPONENT MEASUREMENTS 📐:
- Use
min-height: 100vh
formain
instead ofheight: 100vh
. Setting theheight: 100vh
may result in the component being cut off on smaller screens.
- For example; if we set
height: 100vh
then themain
will have100vh
height no matter what. Even if the content spans more than100vh
of viewport.
- But if we set
min-height: 100vh
then themain
will start at100vh
, if the content pushes themain
beyond100vh
it will continue growing. However if you have content that takes less than100vh
it will still take100vh
in space.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0 - @HassiaiPosted over 1 year ago
To center .stats-preview-card on the page using flexbox or grid ,
- USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body
body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
- USING GRID: add min-height:100vh; display: grid place-items: center to the body
body{ min-height: 100vh; display: grid; place-items: center; }
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here
For a responsive content give .stats-preview-card a width of 80vw or a max-width of 1440px and a width of 80%. Replace the height in .stats-preview-card-details with a padding value for all the sides this will prevent the content from overflowing.
in the desktop design add display flex to .stats-preview-card and give .stats-preview-card-details and .stats-preview-card-image a width of 50%
in the media query for the mobile design, give . .stats-preview-card flex-direction of column-reverse and give . .stats-preview-card-details and .stats-preview-card-image a width of 100%. for the color of the image, add a background-color of soft-violet and add a background-blend-mode: multiply and opacity:0.8 .
.stats-preview-card-image{ background-image: url(); background-size: cover; background-color: hsl() background-blend-mode: multiply; opacity: 0.8; }
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful0
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