Skip to content
Submitted over 1 year ago

order-summary-component-main using flexbox

m0nagamal•90
@m0nagamal
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

Community feedback

  • Vijay K Naik•940
    @KruzadeR-VictoRPosted over 1 year ago

    Hi there 👋,

    you have done a pretty good job, For the background illustration you should add background-repeat:'no-repeat' & background-position:'top' to the <body> tag and change bg-size to 'contain' so that it takes the space to fit itself and doesn't repeat in some cases. Also don't use margin in ur <main> and set height to 100vh instead and you're good to go 👍.The bg illustration will look more centered that way

    1
    m0nagamal•90
    @m0nagamalPosted over 1 year ago

    @KruzadeR-VictoR Thank you for your recommendations 🙏🏻. It works with the background, but for the height, I set the min-height to 130vh to fit the design and provide a margin from above and below.

    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