Design comparison
Solution retrospective
I still have issues with how to center a container on the page and placing the top and bottom pattern was a more significant issue for me. I also couldn't add the footnote at the bottom of the page because I used display: flex on the body and now both container and footnote were displaying side by side, I had to comment on it for not displaying on the page. Positioning the followers, likes and photos was another problem for me, trying to place them under the stats numbers the way it is on the screenshot. I had to style differently for me to be able to achieve it. I would welcome your suggestions and feedback on the above challenges I had completing this task. Thank you
Community feedback
- @elaineleungPosted about 2 years ago
Hi Fortune, I think you did well in putting this together, as this is a really tough challenge especially with the positioning of the circles. The main thing I would suggest is to use the SVGs as background images and not have them as
img. When I did this challenge, I structured the HTML somewhat like this:<body> <main> <div class="main-wrapper"> // this is for the positioning the circles <div class="card"> // everything in the card </div> </div> </main> <footer> </footer> </body>About the footer: You can definitely add it back in, and using flex is completely fine! All you need to do is, try adding
flex-direction: columnon the body so that the footer and main won't be side to side but stacked instead.If you're interested in how I positioned the circles, you can check out my solution here: https://www.frontendmentor.io/solutions/mobilefirst-profile-card-component-tHwQF0G1u
Hope this helps you out, and once again, well done!
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