Skip to content
Submitted 3 months ago

Responsive Social Links Profile

Nelson Montesinos•70
@Daydream-Softworks
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?

During the development of this project, I gained a deeper understanding of CSS Flexbox, specifically the use of the flex-direction property for controlling the alignment of flex items, and the gap property for managing spacing between items within a flex container.

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

For this challenge, I encountered no issues and was able to effectively apply the knowledge I had previously acquired.

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

Any feedback would be greatly appreciated.

Community feedback

  • Boris•2,850
    @mkborisPosted 3 months ago

    Great work @Daydream-Softworks, here are a few things to review

    • To improve the semantic meaning of these social media links, you should use the a (anchor) tag instead of the button tag. The a tag is used for navigation to other pages, while the button tag is designed for interactive actions like submitting forms or for events like toggling content. Also, using an unordered list ul to group the social media links is a better approach for both semantics and accessibility.
    • Avoid setting fixed heights and widths on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, use max-width or min-height. Change the width of the .social-links-card to max-width and remove the height completely
    • Change the height of the body to min-height, using min-height ensures the content can grow beyond the viewport height if necessary, while height would restrict it to exactly the viewport height, potentially causing overflow issues with content that exceeds this height.
    • Media queries should be define in rem not px
    Marked as helpful
    2

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