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 Card — HTML, CSS

Juanca 220

@juancaorg

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


This one was easy in comparison to other card projects. I struggled a little bit centering the items on my body grid and ignoring the pattern-background.

Could figure out a solution by centering all the items in the body grid, and then centering the pattern-background back.

Getting better little by little :)

Community feedback

Elaine 11,400

@elaineleung

Posted

Hey Juan, I ended up checking out some other solutions you have here, and anyway, just wanted to respond to the note you made on the background. I see that you used a picture element here; I would suggest using a background image here instead since the image really is just for decor and doesn't serve a purpose in the content or message of the card. You can try removing picture element and then add something like this to the body selector:

body {
   background-image: url("./images/pattern-background-desktop.svg"); // use media query to switch to mobile or vice versa
   background-repeat: no-repeat;
   background-size: contain;
   // you can also use background-position if you need to place it in a very specific location
   // rest of your code
}

You can also add some margin around the card as right now, when I'm viewing it on my laptop, the top of the card is touching the top of the window.

Marked as helpful

1

Juanca 220

@juancaorg

Posted

@elaineleung Hey Elaine 👋,

Thanks for your feedback, didn't think about that.

I just implemented your tips on my solution. Really appreciated! 🙌

0

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