Submitted almost 4 years ago

Order Summary Component | @luidrawly

@luis123doria

A solution to the Order summary component challenge

Solution retrospective

Hi! My name is Luisfer and Im a Newbie here:D I hope u enjoy my first project. Feel free to comment and give me a feedback:))

Code

Please log in to post a comment

Community feedback

darryncodes•6,350
@darryncodes
Posted almost 4 years ago
Hi Lusifer

A few changes I made inspecting your design that i think could help:
- you should use max-width: 420px; on .component
- remove display: grid; width: 30%; margin: 25px auto; from .component__content
- change .content__img to: width: 100%; height: auto;
- you could add a hover affect to your <button>
- use this on your body to center your design nicely in the viewoport:
```
  display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
```
Marked as helpful
Tiass•295
@Tiasstiass
Posted almost 4 years ago
Good job!👏

Tested it on Safari iOS, nice work on the card itself, the positioning is off on both portrait and landscape orientation. Also the box-shadow on the card is off and its values looks random, 0 2px 5px #00000033 is usually enough for a card

Keep up the good work 💪
Marked as helpful

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