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

Call center card

@Edinson25

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@DavidMorgade

Posted

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
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