Skip to content
Submitted 6 months ago

Responsive + Interactive Order Summary Component

Ngụy Mỹ Linh•80
@linhcbs
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Making this component responsive. I think I will try to find a more efficient way to do that.

What challenges did you encounter, and how did you overcome them?

I struggled with styling the shadow of the card—it took me over 10 minutes to get it right. I wish I could do it faster.

I also encountered issues making the card responsive. Aside from adjusting the margins and paddings, I spent a lot of time tweaking the font size to make it responsive.

What specific areas of your project would you like help with?

Any feedback would be appreciated!

Code

Please log in to post a comment

Log in

Community feedback

  • Julia Bush•360
    @juliabush

    Hey, awesome job on this project! Your use of BEM notation and your CSS Reset and root make the code clean and easy to read. I only have a couple of tips to offer. 1st, to get closer to the original image, use text decoration: underline; on the change text in the section with the music icon/plan/price. 2nd, try using rem for font size instead of pixels. This is because some users change font size to be larger in the browser, and rem will change to these settings, whereas font stays fixed, hence why rem is better for accessibility. 1rem is equivalent to 16px, many calculators can be found online. Hope these tips help! Keep up the good work :)

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