Skip to content
Submitted almost 3 years ago

Order summary component challenge hub

Ganesh•280
@Ganesh-Rathor
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

everything is great but the illustration was in svg type so, i don't know how to access the file

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi Ganesh, good job :)

    To insert the svg image in the background you just need to add the background-image: url(./images/namefile.svg); property to the body.

    Also try using Flexbox, it can help you better center elements on the page: give the flexbox and height properties to the body and remove all margin from the .main-div class.

    Read the guide -> Flexbox

    Note: Flexbox aligns to the size of the parent container.

    You can use the vh measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window.

    I hope that helps ;)

    Marked as helpful
    0
    Ganesh•280
    @Ganesh-RathorPosted almost 3 years ago

    @denielden thanks for feedback in my course nothing teach about flexbox now I go to internet and learn about flexbox

    1
    Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    @Ganesh-Rathor You are welcome! Don't forget to mark the comment as helpful!

    Thank you and Happy coding :)

    0
  • Paweł Andrys•190
    @VeeltuPosted almost 3 years ago

    try--->

    </head> <body> <div class="background"> <img src="images/pattern-background-desktop.svg" alt="pattern" id="background-img"> <div class="main-div"> ..etc
    0
    Ganesh•280
    @Ganesh-RathorPosted almost 3 years ago

    OKK I understood thaks for your 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