Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary — Vanilla HTML & CSS

Jack 10

@jkufa

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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!

Community feedback

P
hardy 3,660

@hardy333

Posted

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

4

@brookewargnier

Posted

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

3

@faiyaz-rahman13

Posted

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

1

Please log in to post a comment

Log in with GitHub
Discord logo

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