Responsive Order Summary using HTML5 and CSS3
Design comparison
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
- @ohsitePosted about 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 helpful1@michaeljohnson-mjPosted about 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 GitHubJoin 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