Skip to content
Submitted over 3 years ago

Responsive Order Summary using HTML5 and CSS3

Michael Johnson•100
@michaeljohnson-mj
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello,

I built most of the things from the reference image provided. But I still feel that the background image with pattern is not positioned properly on desktop mode. Would love to have some feedback to rectify the background issue.

Best Regards!

Code

Please log in to post a comment

Log in

Community feedback

  • Adrian•190
    @ohsite

    Dear Michael, Honestly, given all types of screens and resolutions it's basically impossible to get a perfect match. On some challenges offset is used. For ex. to set two background images with offset I use:

    background-image: url(image1), url(image2);
background-position: -100px 0, calc(100% + 100px)  calc(100% + 100px);

    By using this trick 1st image will be top left corner -100px, 2nd bottom right +100px no matter the screen size.

    Try to get a perfect match with order summary challenge using offset. Stay motivated!

    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