Skip to content
Submitted almost 2 years ago

Order Summary Component using html and css

Fadilano•70
@Fadilano
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I dont know how to make all of the container element smaller when di screen size is smaller

Code

Please log in to post a comment

Log in

Community feedback

  • hitmorecode•7,540
    @hitmorecode

    To fix the background image issue make these changes

        background-size: contain; /* add this line */
/*     background-position: -190px -400px; */ /* remove this line */

    As for you problem with the width on smaller screen you can use media query to fix this

    @media only screen and (max-width: 450px) {
    .container {
        max-width: 370px;
        /* the image is not going to change, because it is styled in the html */
    }
}

    Why did you styled the image in the html file? Avoid doing this, for style use css.

    Marked as helpful

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