Skip to content
Submitted 10 months ago

order-summary-component using HTML + CSS

Aldrin Sean Pereira•90
@AldrinSeanPereira
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 have 2 questions:

  1. Is it better to use responsive units for card width/height or absolute units?

  2. Which is better to use?

.annual-plan,
.annual-plan div,
.annual-plan div div {
    display: flex;
}

.annual-plan,
.annual-plan .subcontainer,
.annual-plan .subcontainer .subcontainer-subcontainer {
    display: flex;
}

Community feedback

  • Raza Abbas•790
    @RazaAbbas62Posted 10 months ago

    Hi, It is generally recommended to use responsive units, such as percentages or viewport units, for card width/height instead of absolute units. Responsive units ensure better adaptability to different screen sizes and devices, providing a more consistent and user-friendly experience.

    For the second question, the second option is more efficient and cleaner. This approach combines the styling for related elements more concisely, making the code easier to read and maintain.

    Happy Coding:)

    Marked as helpful
    1
    Aldrin Sean Pereira•90
    @AldrinSeanPereiraPosted 10 months ago

    @FazeenIjaz Thank you so much for sharing your opinion!

    0
    Raza Abbas•790
    @RazaAbbas62Posted 10 months ago

    @AldrinSeanPereira You're welcome! I appreciate you taking the time to read my suggestion.

    1

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