Skip to content
Submitted 10 months ago

order-summary-component-rodjoker

RODOLFO RODRIGUEZ•60
@rodjoker
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

Community feedback

  • Øystein Håberg•10,710
    @Islandstone89Posted 10 months ago

    HTML:

    • The image and icon are both decorative, meaning their alt text should be empty:alt="".

    • I would change "Order Summary" to a <h1>, and "Annual Plan" and the price to <p>.

    • .attribution should be a <footer>, and its text must be wrapped in a <p>.

    CSS:

    • Performance-wise, it's better to link fonts in the <head> of the HTML than using @import.

    • It's good practice to include a CSS Reset at the top.

    • Remove align-content, you only need align-items.

    • On the body, remove the margin. Instead, add a bit of padding, so the card doesn't touch the edges on smaller screens. Remove the width - the body is a block element, meaning it is 100% wide by default. Change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

    • On the card, remove align-self, width and margin. Also, max-width should be in rem - around 20rem works fine I think. NB: When you need horizontal margin, you can use margin-inline.

    • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • line-height must also never be in px.

    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