DEV Community

Aituos
Aituos

Posted on • Updated on

Frontend Mentor - Order Summary Component

The finished design

Order Summary Component design from the website Frontend Mentor.

https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj

You can see my finished version here:

Github repo | Live version

This design wasn't that difficult to create, but it was definitely fun.

The only problem I had was with the background, more specifically I didn't know how to position it to look exactly like the original design. So I looked at some of its' properties - background-position and background-size - more closely. I'm used to setting the position to center, and the size to cover, because it always did what I wanted 😆.

Turns out it's possible to fine-tune the background's position. You can read more about it here:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

In the end, I set the two properties like this:

background-position: top;
background-size: 100%;

And it worked like a charm. I think.

One more thing I wanted to mention is that I recently found out you can set aria-hidden="true" on any HTML elements that you want to hide from screen readers, such as decorative images, so I did just that. If you use it on images, you still have to include the alt text, but set it to an empty string:

alt=""

Top comments (0)