Skip to content
Submitted about 3 years ago

Order-summary-component

Adithya shetty•80
@ADITHYAADHI06
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

feedbacks are heartly welcome.

Community feedback

  • darryncodes•6,370
    @darryncodesPosted about 3 years ago

    Hi Adithya,

    Really close match, good effort. With a few more little tweaks it could be perfect!

    • use padding: 15px 70px; on your .container_main instead of margin, it won't create the border
    • add your background styles to the <body> instead of your .container and remove background-position: top;' with background-size: 100% auto;`
    • add cursor: pointer; to your button styles
    • be mindful of you semantic html mark up and heading structure

    All the best!

    Marked as helpful
    0
    Adithya shetty•80
    @ADITHYAADHI06Posted about 3 years ago

    @darryncodes thank you great feedback... can u help me to make this card height and width responsive.

    0
    darryncodes•6,370
    @darryncodesPosted about 3 years ago

    you're welcome @ADITHYAADHI06. Good question, try to avoid using fixed heights and add max-width instead of width.

    Two other suggestions:

    • use media queries to change the styles per screen width
    • use relative units (rem/em) not absolute units (px)

    "REM unit makes everything take their size relative to the root font-size. If we change the root font-size, all elements will automatically change their sizes" here is the article the above snippet is from

    If you change the root font-size at different break points with media queries everything will reduce in size - it's like magic!

    This is a common starting point for me:

    html {
    font-size: 62.5%;

    @media only screen and (max-width: 56.25em) { //900px
        font-size: 56.25%;
    }

    @media only screen and (max-width: 37.5em) { //600px
        font-size: 50%;
    }
}
    Marked as helpful
    0
  • Adithya shetty•80
    @ADITHYAADHI06Posted about 3 years ago

    thank you.... it works... great feedback.

    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