Skip to content
Submitted over 3 years ago

Responsive Order Summary Card (CSS, Sass)

Ngoc Anh Vu-Martell•125
@anh-vumartell
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

Hi!

  • Any tip/trick to position the card to in the middle of the viewport? I tried position: absolute, top and left set to 50% and transform: translateX(-50%, -50%) but it doesn't work.
  • How do position the background pattern on the .page-container? Feel like a fool using negative values in background-position.
  • When should I use % or vh/vw to set width and heigh of an <div>?

Thank you for reviewing my codes. Cheers!

Community feedback

  • Ahmed Faisal•5,095
    @afrusselPosted over 3 years ago

    Use this to take your main container in center display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center;

    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