Use of GRID and Flexbox to style

Community feedback

• 

  Chris-Ann C.•300

  @cdc2021Posted almost 4 years ago

  Great, thank you :)

  0
• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi,

  This doesn't quite look right to me in lots of small details. On mobile all the content is narrow and off-center (is the bg image missing on mobile too? Could just be my screen brightness, not sure).

  And looking at that desktop preview the top and bottom sections aren't aligned on the sides.

  Take a bit more time on this and. See if you can refine the details. I'll share a mobile. Screenshot for you in slack so you can see what I'm seeing

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  In the html your rated 5 stars text shouldn't be h2s (they're not headings for anything) and the alt text on those star images definitely needs to be empty like "alt="". I'd add aria-hidden="true" on there too to make sure assistive tech ignores those images. The writing says that it's 5 stars so they're not needed.

  Hope that helps you ☺

  1

  

  Chris-Ann C.•300

  @cdc2021Posted almost 4 years ago

  Hi @grace-snow,

  Thank you again for your feedback, I appreciate the time taken. Now that you have mentioned I can see the small details missed. Thank you for bringing to my attention, learning a new skill I am eager to secure my knowledge in HMTL and CSS and leave out the other important element of coding such as a detailed design !

  Do you recommened adding aria-hidden=true on images such as the 5stars at all times?

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  @cdc2021 if they are purely decorative then yes probably best to. It might work if you put aria-hidden on the div that's wrapping them and cleared the alt values.

  Screen readers are meant to skip over images that have alt="" but I have noticed recently that Voiceover on mac is continuing to announce them when it shouldn't. That's why I've started adding the aria-hidden as well if I know it's an element that assistive tech can/should skip over

  0