Design comparison
SolutionDesign
Solution retrospective
How do i centralize my <ul> properly without positon:relative?
What do I need to change to get the same font design from the screenshots?
Community feedback
- @nmnjnklcPosted about 2 years ago
Hello @leoweabo,
Instead of unordered lists (<ul>), try something like this for HTML:
<div class="statistics"> <div class="followers"> <span>80K</span> <p>Followers</p> </div> <div class="likes"> <span>803K</span> <p>Likes</p> </div> <div class="photos"> <span>1.4K</span> <p>Photos</p> </div> </div>
and to get that proper design, CSS would be:
.statistics { display: flex; flex-direction: row; justify-content: space-between; padding: 1rem; border-top: 1px solid #9696964f; } .followers, .likes, .photos { min-width: 6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
Hope this helps. Happy coding!
Marked as helpful1@LeonardclcPosted about 2 years ago@nmnjnklc Thanks, It worked perfectly, I just had to make some adaptations. The only thing that I couldn't replicate exactly is the font size and appearance.
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