Skip to content
Submitted about 2 years ago

Order Summary Submission

Esteban•340
@estebanp2022
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

A couple of things if anyone has the time to advise:

  • Is there a way to compress the size of the main image? The SVG is huge and takes up lots lines of code. It's not a big deal but the HTML is massive because of it.

  • Any insight on how to center the image on mobile? I have tried everything to no avail. I've played around with sizing - both in px and %, with object-fit and object-position, both with the image itself and the parent container and nothing works. The mobile version shows the image not centered.

Thank you for taking the time!

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @estebanp2022 👋, good job for completing this challenge!

    Here are some suggestions to improve your code:

    1.You can use a SVG directly in an <img> tag.

    <img src="./images/illustration-hero.svg" alt="your_alt_text">

    2.Update the background properties:

    body {
   . . . 
   background-position: top left;
   background-size: contain;
}

    References: CSS background Property | Background property

    I hope those tips will help you.

    Good Job and happy coding !

    Marked as helpful
    0
    Esteban•340
    @estebanp2022Posted about 2 years ago

    @MelvinAguilar thank you!! That fixed all issues :)

    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