Responsive Order summary component with some Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @dvd41esp 👋, good job for completing this challengey! 🎉

  Here are some suggestions to improve your code:

  • Use min-height: 100vh to body selector instead of height: 100% , with this property you set a height and you let the element grow even more if necessary.

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

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

  • The form tag is used so that the user can send information, in this challenge the anchor tag is enough

  I hope those tips will help you.

  Good Job and happy coding !

  Marked as helpful

  2

  ---

  

  David•60

  @dvd41espPosted about 2 years ago

  @MelvinAguilar Quite helpful actually. Didn't remember how to use the vh unit. Thanks!

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @dvd41esp, some suggestions to improve you code:

  • To center you content to your page, add the following to your Body Element:

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  • The “Illustration” and Music Icon serves no other purpose than to be decorative; It adds no value. The Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  • Your "button" was created with the incorrect element. When the user clicks on the button they should directed to a different part of you site. The Anchor Tag will achieve this.

  • The background color was not applied to the plan/price container.

  Happy Coding! 👻🎃

  Marked as helpful

  1

  ---

  

  David•60

  @dvd41espPosted about 2 years ago

  @vcarames Thanks a lot!

  0