Order summary component challenge with Flexbox and mobile layout

Community feedback

• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  I think this looks great. Except for the slight difference in alignment in the comparison window it look spot on. Wrap the card section in a main tag and change the Order Summary to an H1 and it will clear the accessibility warnings. You may have to restyle the Order Summary text when doing that. Hope this helps.

  Marked as helpful

  1

  ---

  

  Giovanni Beccaro•160

  @GioltekPosted almost 3 years ago

  Thanks for the feedback @brodiewebdt ! Yeah, I noticed the difference in alignment too, it's probably caused by the attribution at the end. I just removed the attribution even though it was fixable without deleting it, now it should look better on the side by side, even though it isn't updating for some reason. Thanks for the tip about the h1, I was pretty sure I made it an h1, but it was a paragraph indeed ahah! Also it seems like h2-h6 are the problem by the html report, but whatever, I won't update the github again, also an h2 isn't really needed in a card like that so that's alright.

  0
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  The report was because their was no Heading tag at all. Those reports aren't very clear. Download AXE DevTools and use it while you are coding to help clear up accessibility issues. https://www.deque.com/axe/devtools/

  0

  ---

  

  Giovanni Beccaro•160

  @GioltekPosted almost 3 years ago

  Thanks, I definitely will!

  0