Responsive social links profile using CSS Flexbox
Design comparison
Solution retrospective
This challenge has been a great way to learn more about flexbox and responsiveness.
What challenges did you encounter, and how did you overcome them?However, getting the padding and size of the card to match those in the design was a bit challenging, but this was solved using the clamp()
function.
What are better and more effective ways to implement a responsive layout for this particular challenge?
Community feedback
- @MichaHuhnPosted 4 months ago
Good work!
You are using good class names.
Do you know why your solution is so small compared to the mockup?
Regarding your question: You can put the elements
card__profile
andcard__btns
into a dedicated HTML element, e.g.:<div class="card"> <div class="card__profile"> <div class="card__btns"> </div>
Then it's easier to center this card element. For example you could use grid on the main element to center the card:
main { display: grid; place-content: center; }
To make the card responsive, I applied a
max-width-wrapper
class to the card element. This technique is explained in this YouTube video. That's an interesting approach, but there are also other ones.I hope that's a bit useful.
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