Skip to content
Submitted almost 3 years ago

Huddle landing page with a single introductory section (CSS/SASS)

Vincent Chen•120
@VincentChen6345
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Questions

  1. In my mobile view, the bottom of my social media icons seem to be cut off at the end. Does anyone know how to create more space in the page?

  2. For some reason, my instagram icon is cutoff on the edges which gives it a weird look. When I adjust the border radius to 20% instead of 50%, this problem is gone but my outline borders arent circular. Is there a way to keep my border-radius at 50% but keep my instagram icon normal?

Thanks in advance!

Community feedback

  • Alex Li•400
    @awexliPosted almost 3 years ago

    1. You might not need more space. Rather you can add margin-top to the home-main-social class instead of the social-networks class

    2. I noticed it clips off the edges of the other icons as well. An alternative could be to wrap your icon in a div and have that be the border instead of using outline. The border-radius property you're using doesn't work well with outline. Maybe they'll come out with an outline-radius property :-)

    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