Design comparison
Solution retrospective
In general, the challenge wasn't particularly hard. Only problem I had was setting up the background. When adding the "cirlcle" things in the background the website height would automatically expand which made the end result not look exactly as intended. After trying out google, could't find a solution. Another slight problem I had was the text. Since the profile picture container position was set to absolute, the text would be below the top banner but behind the profile picture. In order to solve this, had to manually position the container that includes all the text, which I don't know if it is best practice to do so. (Pardon any grammar errors, still haven't mastered the english language)
Community feedback
- @georgescreatesPosted almost 4 years ago
Hey! How are doing ? I just tried this challenge. Reading your issues, I think I can help with you with one point. Considering the circles in the background, I added " overflow: hidden; " to the DOM element on which the background-color is applied. For you, it will be the body. I set a height for the body, I apply the overflow hidden, like this, it won't expand to contain child elements. You can check the w3schools' article here : https://www.w3schools.com/css/css_overflow.asp
It's how I did. I hope this will help you.
1@joelhenwangPosted almost 4 years ago@georgescreates Hey George! Thanks alot for the tip! I was able to fix the problem and now the solution look almost identical as the intended. Cheers!
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