Skip to content
Submitted over 1 year ago

Order summary component solution with HTML and SCSS

sophie.•150
@sophie-mc-dev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is my solution for the Order Summary Component challenge.

  • Feel like the solution could've turned out better so I might do some improvements soon.
  • Had to turn the 'Proceed' and 'Cancel' buttons into <a> tags otherwise the styles would get messed up. Was their a way to overcome this issue?
  • I also would love to know if there are any good practices for mobile responsive design I should start implementing? I always feel like I don't do much for it. Do you use max-width or min-width and what 'px' do you use for each?

I'm happy to hear any feedback and advice to help me improve! Thank you!

Community feedback

  • hitmorecode•6,360
    @hitmorecodePosted over 1 year ago

    Nice well done. One thing you can change to make it look better on smaller screen size. When the screen size reaches 375px everything inside music-plan-container gets squeezed. The reason for this is the 10% padding on card-body, if you change it to 10px or 15px it will solve this issue

    .card-body {
  padding: 10%; /* change this to 10px or 15px */
  text-align: center;
}
    Marked as helpful
    0
    sophie.•150
    @sophie-mc-devPosted over 1 year ago

    Thank you @hitmorecode ! I'll try this out!

    0

Please log in to post a comment

Log in with GitHub

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