Skip to content
Submitted over 1 year ago

Order summary component using React and CSS

Andrea Iriarte•130
@andrea-iriarte
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 had trouble with the background image. I sit the width to 100vw so that it could respond to changes in screen width, but I was unable to get rid of a sliver of margin along the top and left of the image. Can anyone help with that?

I wanted to switch between the desktop and mobile patterns using the <picture> tag, but could not get the <source> tags to work on react. Has anyone resolved a similar issue?

Community feedback

  • impiia•400
    @impiiaPosted over 1 year ago

    Hello, you did a great job! By default, all elements have some styles applied to them, and the body element has a default margin. Let's reset it to zero:

    body {

    margin: 0;

    }

    This will remove the default margin, allowing you to have more control over the layout. Keep up the good work! Feel free to customize the styles further to match your design preferences. You're doing an excellent job, and your attention to detail will make your website even more impressive. Keep learning and experimenting with different CSS properties and techniques. Good luck with your future endeavors!"

    Marked as helpful
    2

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