Order Summary Card using flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in general looks great and adaptive for mobile.

  I haven't tackled this challenge yet so don't really know about the issue that you said.

  For suggestions, here are some:

  • Avoid using height: 100vh on a large container like the .container as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • Always have a main element to wrap the main content of the site. For this use main tag on the .container selector.
  • The illustration in here is only decoration. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
  • Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
  • When using img tag, you don't need to add words that relates to "graphic" such as "illustration" and others, since img is already an image so no need to describe it as one.
  • Always have an h1 on a page. For this one, temporarily you could use h1 on the order summary instead of h2. But for a better usage of h1,have a look at Vanza's solution on this one. On this solution, you will see a screen-reader only h1 usage. See how it is used and the stylings applied to it.
  • The music-icon should be hidden as well so use the method I mentioned above.
  • The annual-plan and the pricing below it are 2 separate text. The annual-plan should/could use h2 since it gives information on what the section contains and use p tag on the pricing.

  Aside from those, great job again on this one.

  Marked as helpful

  0

  ---

  

  P

  Achi Gyuse Achi•160

  @AchigyusPosted about 3 years ago

  @pikamart Thank you for your kind words, I've updated my solution with the your suggestions

  1