Skip to content
Submitted 8 months ago

Simple Social Link Profile Dev Using Basics HTML&CSS

Jumagobe•1,050
@Jumanjigobez
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 challenges did you encounter, and how did you overcome them?

I was using Unordered List method for the social links, but I was unable to make the hover link to the full element, it was just accepting hovering to the a tag text alone.

So, I decided to use only the a tags under a div tag and then I was able to fix the issue of enabling hovering to the whole let's say the button.

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

I would love to get to know how to use the UL method and then making sure the a tag when hovered the whole part of the link to accept hovering.

Yaap, otherwise it was a good refresher for me.

Hope you give it a Like :)

Community feedback

  • ehennes•70
    @ehennesPosted 8 months ago

    Looking at your solution, what you might be able to do for the UL method is:

    1. Make the <a> tags inside each <li> block elements, which would make them the full width of the parent <li>
    2. Keep the padding on the <a> tags, but instead of having the hover effect on the <a> tags, put it on the <li>

    I hope this helps! Nice work!

    1
    Jumagobe•1,050
    @JumanjigobezPosted 8 months ago

    @ehennes Thanks but I tried that, now the issue is when I click outside the a tag text and click the li tag it will not take me to the link. I wanted when I click the whole of the element to take me to the link as I did.

    But thanks again for the feedback it was helpful of you :)

    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