Order Summary Component using SASS and CSS Flexbox

Solution retrospective
The only problem I had is that the background image is not visible on the live site, but it is visible on my local server.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @correlucas
👾Hello Yaika, Congratulations on completing this challenge!
The background wave image its not correctly placed, here's some steps to fix 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%
,The SVG background is not properly applied, to fix that first you need to add
background-size: no-repeat
(to avoid it repeating) and then addbackground-size: contain
to make it fit full width and vertically aligned with the card.✌️ I hope this helps you and happy coding!
Marked as helpful - @denielden
Hi Yaika, congratulations on completing the challenge, great job! 😁
Some little tips for optimizing your code:
- to fix the top image in the background just put more specific background properties to the body and correct the
url
:
background: url("../img/pattern-background-desktop.svg") no-repeat top center; background-size: contain; background-color: #e0e8ff;
- remove all unnecessary code, the less you write the better as well as being clearer: for example the
div
container of image - use
min-height: 100vh
to body instead ofheight
, otherwise the content is cut off when the browser height is less than the content - add
transition
on the element with hover effect - instead of using
px or %
use relative units of measurement likerem
-> read here
Hope this help! Happy coding 😉
Marked as helpful - to fix the top image in the background just put more specific background properties to the body and correct the
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