Skip to content
Submitted over 1 year ago

Responsive Stats Preview Card

RobertoMada•220
@RobertoMada
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

Hello guys, can you give me feedback about what can I improve or what Im doing wrong? I struggled with the size of the background image, I couldnt find a solution to display it better.

Community feedback

  • MICHAEL•150
    @GeneroustechnocratPosted over 1 year ago

    Hello ROBERTOMADA you did great but you just need to make little correction to get it right. Here is what i suggest you do. you need to create separate div for card and the image-container you also need to create a div container that holds both the image-container and card. you can use this properties to center your div: min-height:95vh; display:flex; flex-direction:row-reverse; align-items:center; justify-content: center; padding:10px; make sure you use the same width and height for image-container and card, width:440px; height:335px; border radius for the card is border-radius:9px 0 0 9px; while the border radius for the image is border-radius:0 9px 9px 0; I believe you are good with every other things. I hope you find this comment helpful. happy coding.

    Marked as helpful
    1
    RobertoMada•220
    @RobertoMadaPosted over 1 year ago

    Thank you @Generoustechnocrat for the advices.

    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