Order-Summary second-solution using HTML and CSS

Community feedback

• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  Hello Julia Fidison MAHANDRISOA ! Congo 👏 on completing this challenge

  Let's look at some of your issues, shall we:

  • Add Main tag after body <main class="container"></main>

  • To center the card vertically

  max-height: 100vh;
  display: flex;
  justify-content: center
  align-item: center;
  

  or use this method 👇

  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
   }
  

  • Learn more on accessibility issues

  happy Coding😀

  Marked as helpful

  0

  ---

  

  Julia Fidison MAHANDRISOA•90

  @Julia-FidisonPosted over 2 years ago

  @Crazimonk Thanks a lot for your feedback. I will make the change.

  1
• 

  Aadvik•1,250

  @Aadv1kPosted over 2 years ago

  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 positon absolute, like so -

    .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
     }
    

  • Background; Css backgrounds are super powerful! You can set background-repeat to no-repeat

  • 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.

  Marked as helpful

  0

  ---

  

  Julia Fidison MAHANDRISOA•90

  @Julia-FidisonPosted over 2 years ago

  @Aadv1k thanks a lot for your help I will apply the changes

  0