Order Summary Card with HTML, CSS

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  Hey, it's a good solution and I'd say it's mobile-friendly enough :) Few improvements you could make:

  1. If you wanted to get rid of the accessibility issues, it would take no more than a minute, just swap the attribution div to footer and your card-container to main.

  2. There's an overflow on your body, but it's an easy fix, swap the height to min-height. Fixed height in general are not needed/lead to problems.

  3. Alt attributes: I see you used "Hero banner image" as an alt which suggests you're not quite sure about what an alt does. Here's this awesome article that gives you a very good explanation: (https://axesslab.com/alt-texts/). I feel like I'm sharing this article everywhere, but it's really awesome :)

  4. Buttons: they use the browser's default font-family. I'm afraid you need to set font-family for buttons specifically, otherwise this happens. Or, if you wanted to get rid of all browser default, you can use all: unset on them.

  0

  ---

  

  Jesse Ma•95

  @jma26Posted about 3 years ago

  @FluffyKas Thank you! Your insight and suggestions are really helpful and I greatly appreciate it! You are right about the alt attribution - I had no clue what to put but your link cleared my confusion and understanding!

  :D

  0