Skip to content
Submitted almost 2 years ago

Responsive Order Summary Card

Cj Rivas•50
@Cjlikescode
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

Really liked the small component to work on! Its been a while since I've done any CSS this week so it was a good warmup back. Really just need to practice on center and sizing containers better.

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    Replace <h2 class="order-card-title"> with <h1></h1>

    Change the background-size: cover; to background-size: contain To center a content on a page, add min-height:100vh; to .order-summary-card and remove the height value. The best way is to place the styling of .order-summary-card in the body. Give the box-shadow color the came color you gave payment-btn but with a lower opacity.

    Hope am helpful 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