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

social links profile solution

@ivan-josef

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@DebabrataBanik

Posted

Your design looks great, but it seems you're not using media queries much. Instead of absolute dimensions, consider using relative values. For the .container__card element, use width: 90% and max-width: 24rem. For the buttons, set the width to 80% of the parent element instead of fixed values. Also, apply a different color for the hover state. This approach works, but there’s still room for further improvement.

Marked as helpful

0

@ivan-josef

Posted

@DebabrataBanik thank you very mutch, in my last challenge I managed to understand why relative lengths are better than absolute lengths

0

@ivan-josef

Posted

@DebabrataBanik if i can ask one thing, why use max-width instead of just width

0

@DebabrataBanik

Posted

@ivan-josef Width sets a fixed width, meaning the element will always maintain that exact width, which can cause issues on smaller screens when the viewport size decreases. Max-width, on the other hand, allows the element to take up to a certain maximum width, enabling it to shrink when the viewport size decreases, making the design more flexible and responsive. This also works the other way around, ensuring the element doesn't get too wide on larger screens.

Marked as helpful

0

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