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

hannahvw 180

@hannahvw

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Kimo Spark 2,190

@kimodev1990

Posted

  • For centering your design, You could use in your css body element :

min-height: 100vh; display: flex; justify-content: center; align-items: center; then what comes after, let's say your DIV named container will be centered in the middle of your website view.

  • In your future designs, It's better not assign definite values in your case such as your DIV container max-width: 900px: , you could assign the width with percentage value in relative to body element so you could have a responsive design.

  • Adding up with the previous point, you can check on and use clamp ( ) method in your coding for font-size, width, etc., So their designed sizes will change according to the viewport dimensions having a responsive design and will be suitable for any device layout.

Hope you find this useful & helpful .

Other than that, Really Nice work & keep Going on !!

Marked as helpful

0

hannahvw 180

@hannahvw

Posted

Thank you! I appreciate you taking the time to look at my code and make suggestions. They are very helpful and I will definitely try out your tip for centering the container and will look into how to use clamp () method. @kimodev1990

0
Kimo Spark 2,190

@kimodev1990

Posted

@hannahvw You're always welcome, Anytime....

0

@webdevhill

Posted

For this simple card I hard coded the width and height on desktop, 1080 x 446px. I like your use of a psuedo element for the overlay. Clean Code!

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