Submitted over 3 years ago

stats-preview-card-component

Vernon• 60

@VernonDodo

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This design was not that challenging once I got to know my way around it. What I particularly want to get right, is to fill a component with elements and get its size right.

Another thing, on my solution, the backgrounds are visible on the corners but I couldn't pinpoint the elements that I had to style to make that disappear; would really appreciate any help with that.

Community feedback

William Oliver• 10

@whojr01

Posted over 3 years ago

At size greater than 1440px both the mobile and desktop images display this is because of your media query. Maybe you could use a max-width too restrict the screen growth or set a very high boundary.

I liked the way you structured your HTML and naming convention was very clear and concise. I enjoyed reading your code and in reading your css I learned about mix-blend-mode.

Awesome! :-)

Vernon• 60

@VernonDodo

Posted over 3 years ago

@whojr01 Thank you. I'm using a 32-inch LED TV as a monitor and the resolution is just crazy; will do exactly as you advised.

Kris Pietrzak• 340

@krisp-dev

Posted over 3 years ago

Setting 'overflow: hidden' on your .container class where you declared your border-radius should fix the issue with visible corners.

Vernon• 60

@VernonDodo

Posted over 3 years ago

@krisp-dev Thank you for this; was exactly what I was looking for.

Please log in to post a comment

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