Design comparison
Community feedback
- @correlucasPosted over 2 years ago
Hello Kodjo, congrats for you solution!
I check out your live site and I see that your solution is accurate to the design files, you need to fix the width of some card elements setting them as max-width, this way the card can stretch when become mobile, with the width set as a fixed value in the container the card cannot grow or stretch depeding of the screen. Fixing that you'll improve the responsiveness.
I also saw that you didn't apply yet the two circles background positions, I played a little with the background position of your solution and position one circle bottom and another to the top, you can use my values just as an example and then position the circles by yourself following the design reference:
.body { background: hsl(185, 75%, 39%); background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); background-repeat: no-repeat; font-family: 'Kumbh Sans', sans-serif; background-position: top -600px left -200px, top 377px left 546px;}
You should set background-repeat as no-repeat to avoid the image bg duplicating and play with the
background-position
, background-position: top -600px left -200px , top 377px left 546px; Note that the first value "top and left" correspond to the first image and the value after the comma to the second image.I hope this can help you in same way and if you need help or answer feel free to write me I'll be happy to help you.
Keep it up.
Marked as helpful0@cyrilkodjoPosted over 2 years ago@correlucas thank you Lucas. I implemented the changes you suggested and the solution looks better than before. Still trying to figure out the responsive aspect of the design. Grateful
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