Skip to content
Submitted almost 4 years ago

Order Summary — Vanilla HTML & CSS

Jack•10
@jkufa
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Primarily looking for feedback on how I am sizing the card and the inner music image, and any feedback for how make the page responsive more responsive. Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • hardy•3,640
    @hardy333

    hey, your card looks good, good job.

    -I suggest to use semantic html tags such as <section></section> for container and <article></article> for card, it will be little better.

    • use more padding, tiny little bit more xD.
    Marked as helpful
  • Brooke Wargnier•155
    @brookewargnier

    For responsiveness:

    I just finished up this challenge as well, and one way I found that works is setting up a separate css page with a media query so I could better control the different sizes between a desktop version and a mobile version.

    That being said, I didn't get it to be a super smooth transition, but it still allowed me to set up different cases so I could set the d different fronts/ backgrounds/ buttons/ card sizes between the mobile version and the desktop version.

    I found this webpage helpful in the explanation of how to implement it: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    Marked as helpful
  • faiyaz rahman•260
    @faiyaz-rahman13

    you're designing is nice but you can make it look more good. Here is some stuff which if you've applied it would look more good. first, whenever you start doing any task don't write you're code under the body tag instead write it inside the main tag <main><main/> it would specify you're working more. secondly, you can make the card size small and fit it in the middle so that it would look nicer and it would beautify the webpage. third, the div where you have written the pricing. you should make the border-radius a little less and make the background a little more transparent so that it would give an aesthetic vibe. fourth, last but not the least. you could have made the fonts a little small on the mobile version because it looks tremendously big there. so I hope these things will make you're working more efficient and make it better. hope you find it useful.

    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