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 profile with responsive behavior

ElguetaMā€¢ 40

@ElguetaM

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


Hi! If there is anyone who can give me a tip to make the buttons solid color when the mouse pass over them would help me a lot.

Community feedback

Daniel šŸ›øā€¢ 44,270

@danielmrz-dev

Posted

Hello @ElguetaM!

Your project looks great!

  • I noticed that you used margin-top: 150px to move thye card from the top border.

Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

šŸ“Œ Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex;  /* it works with grid too  */
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

Marked as helpful

1
P
Raphael Perfiā€¢ 230

@perfidev

Posted

Well done! You can use the :hover selector.

a:hover { }

Marked as helpful

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