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

Responsive Social Media Links Profile (vanilla)

Alex Blue 70

@fake-alex-blue

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 challenges did you encounter, and how did you overcome them?

Without figma files to base the layout on, (budget : $0.00 😅) I found it challenging to get a close match to the jpg design images.

To solve this, I pasted the design images directly into the HTML, with position: absolute and opacity: 0.5 to see where my layout was different from the original.

I hope it's turned out okay; (but I have been burned by the automatic screenshot on here using an elderly browser version before, so it might not look like it! 😤)

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

I experimented using min() and max() to dynamically adjust the width and padding of the element, but I haven't quite figured out how to make those changes feel proportionate - so that they happen at the same time and same rate.

Any tips on that would be appreciated!

Community feedback

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