Skip to content
Submitted over 3 years ago

Flexbox everywhere. Srcset/media attributes

Giovani•90
@giovanibulian
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, guys. I've started learning front end development recently and this is my first challenge. It took me a while to complete the challenge, but I've learned a lot.

I have 2 questions and would appreciate if someone could clarify any of them:

  1. I've seen some people using a div element as a page wrapper. Is there a special reason for using that instead of using the body element itself ?

  2. How could I center an image in a div element so that when the div shrinks horizontally, the image will be cropped from both sides? (mine is being cropped from the right)

Any other advice regarding my code will be much appreciated! Many thanks in advance!

Community feedback

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

    Hey there, Giovani! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉 Well done on this one! 👍 Your solution looks good and responds well! 👏

    About your questions—I don't really see any reason to include an extra wrapper for the content of the page (unless you are using a JS framework or something and that's needed) or you want to do something like limit the maximum width of the content of the page and horizontally center it (which is a common thing to do). 😀

    In addition to adding object-fit: cover to the image to ensure that it gets cropped (not squeezed or stretched) when the size of its container changes, maybe you could play around with the object-position property to have it remain in the center of the its container, too. Learn more about that property here. 😉

    Hope that helps. 🙂

    Keep coding (and happy coding, too)! 😁

    1
    Giovani•90
    @giovanibulianPosted over 3 years ago

    Hey, @ApplePieGiraffe ! Many thanks for the feedback! 😀 I really appreciate it.

    Thanks for the answers to my questions as well. I'm taking a look at the object-fit: cover and object-position properties you've mentioned and I'll try to work that out.

    Happy coding! 😉

    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