Skip to content
Submitted 6 months ago

social-links

Luis Mariscal•80
@LuisMariscalDev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I feel more comfortable seeing the designs and knowing how I can fix them.

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

I had a small problem when making the list of social links, I completely forgot the "a" tags, I must reinforce HTML semantics.

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

i would like someone to help me to know how i can make my projects more responsive, if you play with the size of the screen you will notice that it has a static width, and if you make it smaller than that size you lose the project. so if you could tell me how to make the sizes of the cards adapt to the size of the screens, i know that i should use media query.

Community feedback

  • Koda👹•3,830
    @kodan96Posted 6 months ago

    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! 💪

    Marked as helpful
    2
    Luis Mariscal•80
    @LuisMariscalDevPosted 6 months ago

    Thank you very much for the advice, I will start applying it to the projects, thank you. @kodan96

    1
    Luis Mariscal•80
    @LuisMariscalDevPosted 6 months ago

    Thank you very much for the advice, I will start applying it to the projects, thank you. @kodan96

    0

Please log in to post a comment

Log in with GitHub

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