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

Music Card

@shivamsingh2499

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Aadvik 1,250

@Aadv1k

Posted

Hey! Here are some fixes I would suggest you apply on your project.

  • Media query on mobile; You should add a media query for smaller screen sizes, maybe you can change the width or the spacing of the elements in the container element.

  • Centering; To perfectly center your container over the body you can use position absolute, like so -

    .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
     }
    
  • Semantic html; Semtantic html makes your code easier to read for both you, and someone looking at your code. semantic html is basically.

    <article>
     <h2> Title </h2>
     <p> Blah blah </p>
     </article>
    

is better and more redable than just putting everything inside a div. For more info You can check this out or you can check some of my projects out to see it in practice.

0

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