Skip to content
Submitted over 3 years ago

Stats Card Using Bootstrap and FlexBox

Elyse Chambers•45
@Elyseeloo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone! This is my first Frontend Mentor Challenge. The concept was easy enough, but I had a few difficulties in places such as the purple color overlay and sizing the image.

  • If you have any tips on how I can make my overlay color more accurate to the original, that would be greatly appreciated.
  • Also, the image gets a bit squished when switching from desktop view to mobile view. If there's any way I can fix this issue, I would love to know.
  • Lastly, I'm working on making my code cleaner and more efficient. If you see anywhere where I could be more concise in my code, or if you have any "best practices" tips I could utilize, please let me know!

EDIT: I was able to fix the squished image issue by adding the element object-fit: cover to the image

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hello there, Elyse Chambers! 👋

    Just wanted to say congratulations on completing your first Frontend Mentor challenge! 🎉 Nice job on this one! 👏 Your solution looks pretty good and is responsive! 👍

    The is just a small tip—but you might want to consider not using percentage values for things like margin/padding so much. In my experience, this makes the space between/around elements a little less predictable (and therefore, harder to control) at different screen sizes. Oftentimes, simply setting a fixed value for margin/padding and changing that once (or maybe twice) with a simple media query (when necessary) works just fine and is easier to manage. 😉 Just a thought! 😀

    Keep coding (and happy coding, too)! 😁

    1
    Elyse Chambers•45
    @ElyseelooPosted over 3 years ago

    Wow, thank you! 🥰 And what a useful tip! I never thought about that. For fixed values, I'm assuming you mean pixels. I'll definitely try and implement this in my next project. Thanks again! ✨

    0
  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    well remove the mix-blend-mode from you overlay and then add opacity and play around with the opacity level and the background-color

    0
    Elyse Chambers•45
    @ElyseelooPosted over 3 years ago

    Thank you so much! I played around with those setting before and couldn't find the right balance, but I'll try again and see what I can do :)

    0

Please log in to post a comment

Log in with GitHub

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