Skip to content
Submitted almost 3 years ago

Responsive Order Summary using HTML5 and CSS3

Michael Johnson•100
@michaeljohnson-mj
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

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!

Community feedback

  • Adrian•190
    @ohsitePosted almost 3 years ago

    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
    1
    Michael Johnson•100
    @michaeljohnson-mjPosted almost 3 years ago

    @ohsite Thanks a lot Adrian. I will try to implement the feedback you provided.

    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