Skip to content
Submitted about 2 years ago

Call center card

Edinson Morales•100
@Edinson25
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

This challenge wasn't that hard, but I was able to keep practicing Bootstrap. However, does anyone know how I can position the image better, since as you can see in the code the image is the background of a div, so I put a background-size: cover, but this makes the image on a tablet it stretches and looks bad and when the resolution is too small it cuts off. I tried with a background-size: contains and it looks better but the image is not cut but a space of the color remains!

Community feedback

  • David•8,000
    @DavidMorgadePosted about 2 years ago

    Hello Edinson, congrats on finishing the challenge

    For me your image is displaying correctly, it flows properly when resizing the browser at least until 375px, less than that shouldn't concern you, since the lowest width screen right now is 357px for the Iphone SE 2020.

    Apart from that, you should consider aligning to the center your component using flexbox on the body instead of just margins, its a bit of a better practice but in your case it will have the same effect as margins!

    Hope my feedback helps you, keep going with that bootstrap, I suggest you to also do some vanilla CSS challenges!

    Marked as helpful
    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