Order Summary Card using CSS and Flexbox

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 3 years ago

  Hello

  This looks pretty good overall except the attribution is overlapping the component on mobile - no need to position that absolutely

  Here are some tips for improvement

  • look up how and when to write alt text on images, and how to treat decorative images
  • you have some invalid html in here at the moment, opening h2 tags but closing h3 tags
  • annual price and the price can't b I th be headings, that makes no sense. If Annual price is the heading, then the price is the content belonging to that heading - a paragraph
  • think again about when to use buttons and when to use anchor tags. What is it you expect proceed to do? What is it you expect change to do? (If this was a real project) It's really important to choose the right element for the job
  • not sure why you have two media queries in here. Most of your css is mobile first except the background image on body for some reason(?) I'd switch that, use the mobile image as the default and move the desktop background into the min width media query you've already got

  Well done on this, good work so far. And yes absolutely use rems, that's spot on. It means everything will scale together no matter the users zoom or font size settings

  13

  Marked as helpful
• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  Greeting stevednick , Great work , your solution is really good. To get rid of the accessibility issue I would suggest to replace <h3> by <h2> click here to read more. keep and happy coding

  10

  Marked as helpful
• 

  Anosha Ahmed•9,300

  @anoshaahmed

  Posted over 3 years ago

  To get rid of the accessibility issue shown in your Report, start your headings with <h1>, and move up by one level each time

  Great job! :)

  00

  Marked as helpful