Order Summary Component | HTML and CSS

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello Bandaru, congratulations for your new solution!

  To make your container responsive and scaling with the screen size, you need to replace width with max-width do the test and you'll see the difference when the container scales, see the code fixes below:

  main {
      display: flex;
      flex-direction: column;
      background-color: white;
      max-width: 340px;
      height: auto;
      justify-content: center;
      align-items: center;
      border-radius: 1rem;
  }
  

  👋 I hope this helps you and happy coding!

  00

  Marked as helpful
• 

  Travolgi 🍕•31,300

  @denielden

  Posted almost 3 years ago

  Hi Bandaru, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • For fix the top image in the background just put more specific background properties to the body:

  background: url("../img/pattern-background-desktop.svg") no-repeat top center;
  background-size: contain;
  background-color: #e0e8ff;
  

  • also you can use article tag for the container of card for improve the Accessibility (main tag is for all the main content of page)
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of button
  • centering a div with absolute positioning is now deprecated, it uses modern css like flexbox or grid
  • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
  • add transition and :hover state on the element with hover effect -> read here
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😉

  00

  Marked as helpful
• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 3 years ago

  Hello, Bandaru Sindhuja! 👋

  Two things can be done better.

  • Remove all br elements from the heading and paragraph. Let lines wrap where they need to. Screen readers will read out br elements. You can't accommodate every screen size, so it's rare you'll ever need to use them.
  • Always specify the type of the button. In this case, set the type of them as type="button". It will prevent the button from behaving unexpectedly.

  That's it! I hope you find this useful! 🙂

  00

  Marked as helpful
• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Bandaru, I think you did a really good job here! You probably just need to position it a bit better and giving some more padding so that it can look even closer to the design 😊

  In your code, I see that you used height: 109vh, which could be a typo 😅, but in any case, I suggest that you use min-height: 100vh instead. Lastly, instead of a fixed width, try something like max-width: 400px; and change the width on the image to width: 100% so that the component can be responsive!

  00

  Marked as helpful
• 

  Shaswat Singh•190

  @shaswatsingh19

  Posted almost 3 years ago

  Hi, I think you could provide some interactivity to button while they been active and as Cancel button is also works like a button it should have like cursor : pointer as it looks good like that.

  00