social-links

hi there! 👋👋

• your element has a static width, because you've applied height and width to it. when you do this you throw responsiveness out the window. it's better practice to let the child elements set the height and width of their parent, since by default the parent adapts to the child elements overall size.

• if you still want to control your elements dimensions you can use relative units with the combination of the max-width property:

.your-element {
  width: 90%;
  max-width: 400px;
}

like this your element will take up 90% of the parent's width, but it will stop at 400px and won't expand above that.

• you used position: absolute; and transform: translate; to center your content. it's better to use Flexbox for this. You can do it if you apply these to your body tag:

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Hope this helped 🙏

Good luck and happy coding! 💪