Submitted about 3 years ago

Responsive Order Summary Card (CSS, Sass)

Ngoc Anh Vu-Martell• 125

@anh-vumartell

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

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

@afrussel

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

Please log in to post a comment

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