Order Summary Component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted about 2 years ago

  Hi @machadogustavo 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  Here are some suggestions you might consider:

  • Use min-height: 100vh to body selector, with this property you set a height and let the element grow even more if necessary. Your elements will also be vertically centered when you use this property.
  • The <div class="attribution"> needs to be wrapped in a <footer> element:

  <footer class="attribution">
     Challenge by ...
  </footer>
  

  • The music icon and the Hero Illustration are for decoration purposes only, so they could be hidden from screen readers by adding aria-hidden="true" and leaving its alt attribute empty:

  <img src="./images/icon-music.svg" alt aria-hidden="true">
  

  • The background property is shorthand for all the properties of the background. Update the property to background-image so you don't override the background color:

    /* background: url(./images/pattern-background-desktop.svg);  <---- Before*/
    background-image: url(./images/pattern-background-desktop.svg);
  

  Or use all the properties in the background:

  background: var(--Very-pale-blue) url(./images/pattern-background-desktop.svg) no-repeat left top/contain;
  

  References:

  • CSS background Property
  • Background property

  I hope those tips will help you.

  Good job, and happy coding!

  Marked as helpful

  2

  ---

  

  gustavo•40

  @machadogustavoPosted about 2 years ago

  @MelvinAguilar Thanks for the comments, I was having doubts about the min-height and the background, I will adjust, thank you very much!

  0
• 

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi @machadogustavo You've done great 💪

  Here are some suggestions to improve your code:

  • To center the component using flexbox add this property min-height: 100vh; to body element

  Click here for more information

  Good job, and happy coding!

  Marked as helpful

  1

  ---

  

  gustavo•40

  @machadogustavoPosted about 2 years ago

  @LovelyFaisal Thanks for the feedback, I'm still learning the flexbox properties, I'll use your tip! thank you so much

  0