Design comparison
Solution retrospective
Feedback will be highly welcome.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Adeola Ganiu, Congratulations on completing this challenge!
Here’s some tips to improve your component design:
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-color: hsl(225, 100%, 94%); background-size: cover; min-height: 100vh; align-items: center; justify-content: center; background-size: contain; display: flex; background-repeat: no-repeat; flex-direction: column; background-image: url(images/pattern-background-desktop.svg); }
✌️ I hope this helps you and happy coding!
Marked as helpful0 - @AdrianoEscarabotePosted about 2 years ago
Hi @Deolabest, how are you?
I really liked the result of your project, but I have some tips that I think you will like:
I noticed that the background image is not centered, to fix this we can do the following:
body { background-repeat: no-repeat; background-size: 100% 50vmin; }
The rest is great!! Hope it helps... 👍
Marked as helpful0@DeolabestPosted about 2 years ago@AdrianoEscarabote I'm grateful. This option 'background-size: 100% 50vmin;' was equally good.
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