Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page using html and css

#accessibility#angular#react#next
timidijโ€ข 160

@timidij

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I am proud I was able to use grid CSS property, which reduced the need to write media queries for the screen breakpoint

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

Well I am having challenge with the button

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

I need help with button, when I click any area outside text, it does not take me to site

Community feedback

P
Koda๐Ÿ‘นโ€ข 1,990

@kodan96

Posted

hi there! ๐Ÿ‘‹๐Ÿ‘‹

Instead of wrapping your <a> elements into <button> elements just give <a> elements padding. Currently you are wrapping the anchor tags into buttons, so the anchors taking up just enough space to fit their content. Just remove the button tags give the a tags padding , the background-color and you will be able to click them anywhere when you hover over them.

Hope this was helpful! ๐Ÿ™

Good luck and happy coding! ๐Ÿ’ช

Marked as helpful

0

timidijโ€ข 160

@timidij

Posted

@kodan96 Hello, thank you, your suggestion was helpful, I have done the correction using <a> then added padding to it. Right now it looks just like the button tag. thank you so much, I appreciate.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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