Skip to content
Submitted 6 months ago

Flexbox and Nested Flexboxes CSS Social Links Profile Card

DF•330
@FengDenny
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?

Creating this social card was a great experience, and a very fun project. It helped me deep dive the fundamentals of flexbox and CSS transitions.

I would probably choose a different coloring scheme, so I can practice on color pairing as much as I can.

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

While I was creating my hover effect to display my social icons, there was an issue where the horizontal scroll bar would appear because I have set my icons position to right: -100% .

Setting my icons position to right: -100% triggered content the my overflowing the horizontal axis of its container (.card-content .card-content-button).

To fix this issue, I simply used overflow-x:hidden to hide any any content that overflows the container horizontally will be clipped and hidden from view. Thus, fixing my scrollbar issue.

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

Since, I used abbr tag with a title, the text is presented by browsers as a tooltip when the mouse cursor is hovered over the element.

Without using Vanilla JavaScript, how can I style this default tooltip using only CSS?

Community feedback

  • Jim Barnett•260
    @jamesbarnettPosted 5 months ago

    I think you did a great job in regards to semantic HTML. It did not occur to me use h1 and h2 for the Name and Location respectively, but it seems obvious looking at your code. Clean, simple, nicely done!

    I ran the WAVE accessibility plugin on your site, and there were no issues. Great work in this regard, too.

    Checked on a range of screens, it is very nicely responsive and handles small screen sizes quite well.

    I found the code very readable and well-structured personally. I did run the code through the html-validator tool, and it did complain about the trailing slash in your single element coding tags. The tool claimed these can create problems if used with unquoted attributes. Sounds like quite the edge case to me.

    Does the solution differ considerably from the design? Yes, but clearly you knew that already. :) The panning-in/out icon effect you added is really cool!

    Marked as helpful
    0
    DF•330
    @FengDennyPosted 5 months ago

    @jamesbarnett

    Really appreciate your comment! Thanks for letting me know the trailing slashes edge case. Happy front-ending, Jim!

    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