Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order summary component using React and CSS

#react

@andrea-iriarte

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@impiia

Posted

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
Discord logo

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