Submitted 6 months ago

Responsive social links profile using CSS Flexbox

Vincent William Rodriguez• 50

@vincentwilliamrodriguez

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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 specific areas of your project would you like help with?

What are better and more effective ways to implement a responsive layout for this particular challenge?

Community feedback

Micha Huhn• 220

@MichaHuhn

Posted about 2 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 and card__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.

Please log in to post a comment

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