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

Huddle landing page with a single introductory section

@rehberbey


Design comparison


SolutionDesign

Solution retrospective


Social media icons did not become round. 🟠

Community feedback

Yeabsira 480

@itsyaba

Posted

Hi Furkan Rehber , Nice Work!

You should try giving it equal height and width for the social-media-icons then the classic border-radius that will solve your problem and if this didn't solve it you should try setting margin , padding and border to 0 for the social-media-icons .

Nice Work Keep It Up .

1

@rehberbey

Posted

@itsyaba Hello, I'm glad you liked it. I can make an item round. If there is text in it I can add div {overflow: hidden;} and prevent the element from inflating. But the icon is still not centered. I can center the icon but I want to escape the "css tricks". Actually I was just wondering if anyone knew the solution. Otherwise it's not much of a problem for me.

Thanks for the answer. 🍕

0
Yeabsira 480

@itsyaba

Posted

@rehberbey the best way to center an item is using flexbox you can try that if you want

1
Divine Obeten 2,415

@Deevyn9

Posted

Hi Furkan, great solution you have here, to get the circular icons, give it a border-radius of 50%. Also try giving each section margins to separate them.

Happy coding 🎈

1

@rehberbey

Posted

@Deevyn9 Hey man, nice to have a ready response. 🙂 But I tried that solution and I didn't get the result I wanted. Even if I make the span element round, the icon is not centered.

0

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