Skip to content
Submitted about 3 years ago

Order summary components challenge using SASS

Adrian•190
@ohsite
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello community! The top image is in the of class "card__image", In desktop version it has the size of an svg image. When i try to cale it's height down for the mobile version weird things happen. Any help would be appreciated!

Community feedback

  • Adrian•190
    @ohsitePosted about 3 years ago

    Hi, thank you for your help!

    0
  • Anar•700
    @anar-solPosted about 3 years ago

    Hello!

    What problem do you have with the card__image? If you want the image to be exactly the size of its container, add this:

    .card__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

    MDN object-fit page: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

    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