Skip to content
Submitted about 2 years ago

Order-summary-component

Sarvotham Gowda•210
@sarvothamgowda
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

  1. Is it necessary to set the background size for the image in the body?
  2. Contents in the plan details were not aligned as per the design. Would like to know the solution for the same.
  3. Width of the pan details and payment button is not equal. How do I match the width of both elements?

Thanks for taking the time to review my work.

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello Sarvotham , congratulations for your new solution!

    Answering your question:

    Its not necessary to set the background in the body as background-image, you can also use <img> or <picture> setting this element under all the other divs or use z-index. In this case the best choice (in my opinion) is to use the wave background inside the body as background-image and use a media query to change for the mobile version.

    You can se the button as display: block and max-width: 100% to keep 100% of the div width less the padding, I did it this way.

    Here's my solution if you want to see how I've managed the content: https://www.frontendmentor.io/solutions/order-summary-component-vanilla-css-custom-wave-background-hover-tEKUwaT2id

    👋 I hope this helps you and happy coding!

    Marked as helpful
    0
    Sarvotham Gowda•210
    @sarvothamgowdaPosted about 2 years ago

    @correlucas thanks for the feedback.

    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