Skip to content
Submitted 10 months ago

Order summary card basic css & html

Nic•30
@MonstersInc-sudo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I am having trouble getting good guidance on accessibility. Anyone have a good reference for buttons?

Also I used <p> for the change plan button, but am not sure if that is a best practice although it can take an "onclick" argument.

Lastly, I can't seem to figure out why the p element for the change plan doesn't underline the g.

Thanks!

Community feedback

  • Marcos Travaglini•4,840
    @BlackpachamamePosted 10 months ago

    Greetings! you did a great job.

    He left you some comments:

    • To center the content in the center of the screen you need to apply these properties: justify-content: center, gap: 20px (separates the main from the footer), in addition, I don't know if this property is really useful for this case aspect-ratio: 1 I would remove it
    • I would also leave the padding to just 10px. With this it should be well centered and not cause any problems.
    • You need to add the name, type attribute to the button and it might be good to add an id even if you don't use it
    • The underline is not shown on the letter g simply because it runs behind the letter, which is fine, as you don't want a line getting in the way and making it difficult to read
    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord