Responsive social links profile using flex-box
Design comparison
Solution retrospective
If you see any issues or improvements kindly comment here or make an issue on the repo issues tab issues
Community feedback
- @danielmrz-devPosted 4 months ago
Hey there!
Congrats on finishing the challenge! ā
Your solution looks awesome!
š It's a good idea to use semantic HTML elements like
<ul>
and<li>
for lists. This makes your code more accessible, maintainable, and meaningful.Here's an example of how you can refactor your code:
After Refactoring
<ul class="list-container"> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> ... </ul>
Using
<ul>
and<li>
makes your content structure clearer, which is better for screen readers and search engines. Plus, it follows best practices for HTML.Hope this helps!
Keep up the great work!
Marked as helpful1@M-AminAlizadehPosted 4 months agoHey @danielmrz-dev
Thanks for the feedback
It resolved
Best,
0 - @MadArtistPhotoPosted 4 months ago
Okay, I re-did the code and the A stays within the LI. Two examples. One with the width of the clickable area based on the width of the text in the link (more text, wider link area). And the other with the clickable area set to the width of the parent element (containing DIV) so all links can be the same width. -CodePen here-. I'm sure there is a cleaner and more elegant way to code this, but it works for me.
Marked as helpful0 - @MadArtistPhotoPosted 4 months ago
This comment was deleted 4 months ago
0@M-AminAlizadehPosted 4 months agoHey @MadArtistPhoto
According to your code you kind of overflow the <a> tag from its container <li> and fire the hover effect on it directly
That's a good approach thanks for sharing
Happy coding
0@MadArtistPhotoPosted 4 months agoYeah, I figured that out so I deleted the comment until I could go back and figure out how I have done it in the past.
0
Please log in to post a comment
Log in with GitHubJoin 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