Skip to content
Submitted over 3 years ago

css flexbox for huddle landing page

Nebiyou Ersabo•185
@NebiyouErsabo
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

Howdy y'all, This is my 7th newbie challenge. I used a mobile first approach but had a really tough time rescaling it to desktop version. The live site is slightly different that the design screenshot so check it out.

The issue I wasn't able to solve was that the social icons on phone look very cluttered. Although they look decently spaced out on dev tools, that is not the case when I open it on my iphone. No clue how to solve this one. Perhaps it has something to do the method i used for the border-lines of the socials and how I centered them.

Apart from that any suggestions, comments, shortcuts are very welcome!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hello there, Nebiyou Ersabo! 👋

    Nice job on this challenge! 👏 Your solution looks good and is responsive! 👍

    That's an interesting issue you have with the alignment of the social media icons (since they look fine on my screen and in the dev tools to me, as well). 😅

    I noticed that you have overflow: hidden on the body in the desktop layout. I suggest removing that because that means that users can no longer scroll and will not be able to view or reach all of the content of the page if they are viewing your site on a screen with a smaller height. If the reason you added that rule was to prevent horizontal scrolling, use overflow-x: hidden instead so that users can still scroll up/down. 😉

    Hope that small tip helps. 🙂

    Keep coding (and happy coding, too)! 😁

    0
    Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    @ApplePieGiraffe Thanks for viewing my solution, the legend APG🙌. oh yea, I added that because there was an excessive space below the footer when you scroll. I thought that i could fix it by limiting the scroll with overflow:hidden. Is there a way to make the footer just stick to bottom of page while still making it scrollable? Thanks for the tips!

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @Nebiyou12

    Haha, glad to help! 😀

    If you allow the height of the header and footer to be determined by the their content (e.g., the logo and the social media icons inside them, respectively), you could let the middle section fill up the remaining space. You could try adding min-height: 100vh to the body to ensure that it's always at least as high as the viewport and maybe something like height: 100% on the middle section to get it to fill up the remaining height of its container. It might take a little playing around with to get right. 😉

    1
    Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    @ApplePieGiraffe Cool will experiment with that a bit.

    Not that it matters to the solution, but I was wondering how long did it take you to learn frontend programming? Also what are you currently doing here in UG?

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @Nebiyou12

    Hey!

    Sorry for the late reply—I didn't see this until now. 😅 I've been learning frontend development on Frontend Mentor for a little less than a year, now. And I actually live here in UG with my family (and have been for quite a while)! 😄

    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