Design comparison
Solution retrospective
- I was unable to centre the card on the vertical axis.
- I did not find out how to crop the web page.
- Sadly, the position of the two "bg-patterns" - the two green circle layouts - varies from one digital device to another.
I will continue to look for more information. Thank you for your help.
Community feedback
- @sirriahPosted almost 4 years ago
Hi, nice work! I recommend you this article about centering.<br> The big circles can be placed into ::before or ::after selectors, or as multiple background image of the container. You can look into my solution.<br> Happy coding!
1@GatafractaPosted almost 4 years ago@sirriah Thank you very much for your advice! Very interesting article 👌 I'm going to take a look at all this immediately. Happy coding too!
0 - @ApplePieGiraffePosted almost 4 years ago
Hello, Gåtafracta! 👋
Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice effort on this challenge! 👏
I suggest adding
overflow-x: hiddento thebodyto prevent a horizontal scroll bar from appearing along the bottom of the screen (due to the background images overflowing thebody, I think). Or if you take sirriah's advice and use CSS background images to add and place the background circles, that issue might take care of itself (as background images cannot overflow their container by default). 😉Keep coding (and happy coding, too)! 😁
0
Please log in to post a comment
Log in with GitHub
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