Order Summary card using css3, active focus and html
Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Fiza Sahar, Congratulations on completing this challenge!
The background wave image is missing and here’s the step-by-step to add it.First of all add the image as a background inside the
body
this is the code for that:background-image: url(../images/pattern-background-desktop.svg);
Then you add
background-repeat: no-repeat
to avoid the background repeating andbackground-size: contain
to make it fit full width and center with the card this is the best choice, but an alternative to resize it is to usebackground-size: 125%
,body { background-image: url(../images/pattern-background-desktop.svg); height: 100vh; background-repeat: no-repeat; display: flex; background-size: contain; justify-content: center; align-items: center; background-color: hsl(225, 100%, 98%); }
✌️ I hope this helps you and happy coding!
0@fizasahar12Posted about 2 years ago@correlucas okay I'll change the background, also can you see my annual price div, when I'm resizing up to 320px or something like this, my content is not fitting in that div(container3). can you please check and give me the answer.
Thankyou
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