Design comparison
Solution retrospective
Had a lot of trouble with positioning the background circles, I finally did it by wrapping the img tags in their container divs, absolutely positioning the containers and defining heights and widths on the images themselves. Is there a better way of doing this? I first tried to use them as background-images but it's been so long that I've last practiced with them that I totally forgot how to handle them, even though I remember that when something is to be placed on top of images, it's recommended to use images as background-images.
Had to search up on how to bypass parent div's padding on the divider line, managed with margin-left: -1rem on the child element. How do you do it? My divider is a simple div with a 1px height, absolute positioning. Is there any benefit to using border-top on the next element, like the stats container div in this case? It feels more flexible being in its own div.
It felt nice to nail down the white border around the profile pic on my first try, and it was fun to play around with positioning it too.
I've had trouble with centering the stats on the bottom. Right now I've got space-evenly on the main axis, with margin-right: 1rem on the individual divs containing the value and name of stats (80k Followers), otherwise I wouldn't have been able to line up the "803K Likes" one with London on top. The Likes were just pushed more to the right, with flexbox's space-evenly, space-around options... Even though I used a transparent background to be sure about things, I couldn't find any reason why with the same padding on the main container div, why would London be center, and the 803K Likes part to be offset to the left... So in my final design I had to cheat it off as I didn't find a solution. If someone knows an answer, I'd be glad to hear your thoughts!
And this is my first time using Vercel hosting, as someone recommended it in one of my previous uploads. It did indeed fix my issues I had with GitHub Pages, now I'll see how I did on the design-solution slider.
Thank you very much for your help!
Community feedback
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