Interactive rating component using Flexbox

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello and congrats on finishing the challenge.

  In this case your component is fully responsive it fits the sizes of the challenge, so you dont have to worry about that.

  In this case your component is not growing because you used a max-width: 420px on the #main-card id, in the case you are building this component as a part of a full page, you can use normal width with % or just adjust them with media querys.

  Let me know if this solves your question

  Marked as helpful

  1
• 

  Juca Perez•270

  @jucajulian0907Posted over 2 years ago

  Hello! @dagimchi,

  with max-width: 420px; and width: 100% you will be able to make the container adapt to any size but it will completely break the design. In the last media query you could decrease the width and increase the height of the container to make it look nice. I hope my comment helps you!

  Marked as helpful

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • It is best practice to use, classes for styling purposes, while using ids solely for JavaScript.

  • The “icons/illustrations” in this component are only decorative. Their alt tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  More Info: 📚

  https://www.w3.org/WAI/tutorials/images/

  • To ensure that the "rating buttons" are fully accessible, they need to be built using a form and inside of it, there should be fiveinput radios and each input should have a label attached to it to make the buttons accessible. Finally wrap all the inputs and labels inside a fieldset to prevent users from making more than one selection.

  More Info: 📚

  MDN: <input type="radio">

  MDN: Field Set Element

  • For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using these unit gives users the ability to scale elements up and down, relative to a set value.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  0