Skip to content
Submitted about 1 year ago

Order summary component

Nylle Griffiths•130
@nyllegriffiths1
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

I would appreciate if anyone could tell me a better way to do it, or if i missed or didnt use any best practices, also i struggled with the background svg so if someone could give me a hint on how to implement that please.

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 1 year ago

    Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

    I have some recommendations regarding your code that I believe will be of great interest to you.

    • You can use the CSS background properties on the body element to set the background of this challenge

      body {
  background-color:  hsl(225deg, 100%, 94%);
  background-image: url(./images/pattern-background-desktop.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left top;
}
      • background-color Set the background color.
      • background-image Set a background image.
      • background-repeat Sets if a background image will be repeated along the horizontal and vertical axes, or not repeated at all.
      • background-position Sets the starting position of a background image.

      The background property is shorthand for all the properties mentioned above:

      background: hsl(225deg, 100%, 94%) url(./images/pattern-background-desktop.svg) no-repeat left top/contain;

    • To vertically center your element, you'll need to specify a height for it. Without a defined height, your element won't center vertically. In addition, you can remove the "margin-top" property since it's unnecessary when centering the element both horizontally and vertically using "align-items" and "justify-content" properties. So, try these changes:

      • Add a "min-height: 100vh" property to your "<body>" tag to set its height.
      • Remove the "margin-top" property from the "container" as it's no longer needed.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    0
    Nylle Griffiths•130
    @nyllegriffiths1Posted about 1 year ago

    @MelvinAguilar Thank you so much Melvin, really appreciate the feedback it was really helpful!

    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