Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Vanilla HTML/CSS Social Links Profile

@MikeCook9994

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

The only thing I had to look up for this was how to adjust the width of anchor tag elements. That does highlight that I am lacking some fundamental information such as the default display property for various common element types, but that's information that easily comes with time.

What challenges did you encounter, and how did you overcome them?

I initially opted for a mixing of flexbox and grid layouts to layout the elements and in doing so I was surprised that elements weren't centering like I expected them to. I did end up getting this working, but I ultimately decided to just use margins to space out elements.

What specific areas of your project would you like help with?

I'm still not sure how of the best way to approach defining the widths for these kinds of cards. A view like this should be highly reactive as much of its base width is just padded out space for the sake of it. However, I am statically setting the width of the component and using min-width in child elements which prevents reactivity.

Community feedback

rezanahi 60

@rezanahi

Posted

Fantastic

I have considered the width of the card to be 380 pixels in my project. Additionally, I have set a breakpoint where I changed the width of the card. I hope this helps.

@media (width < 420px) { body{ padding: 0 1rem; } .card{ max-width: 100%; } }

1

Please log in to post a comment

Log in with GitHub
Discord logo

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