Skip to content
Submitted almost 2 years ago

Order Summary

Sebastian Frampton•400
@sebframpton
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

The svg were difficult to style and the card elements. Outside I think margins always gets when they don't fill the header or footer of a page. How to style a card quickly and with ease?

Community feedback

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

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • You should use a CSS reset. A CSS reset is a set of styles that are applied to all elements on a webpage with the goal of removing any browser-specific styles and providing a consistent starting point for styling.

      Regarding the margin appearing, the <body> tag is an HTML element just like any other, and by default, it has its own styles applied to it by the browser. One of those styles is the default margin of 8px.

      in order to reset that default margin and set the body to a consistent starting point use a CSS reset.

      Popular CSS resets:

    • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

    • You could use the CSS backgrounds properties to set the background instead of using a img:

      body {
  min-height: 100vh;
  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;
}

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

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

      References:

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

    Happy coding!

    Marked as helpful
    1

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