Skip to content
Submitted over 2 years ago

Huddle Landing Page

CharlieeLuna•260
@CharlieeLuna23
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

Unfortunately with this project I'm not a 100% satisfied as I have an issue with overflow, the page can be scrolled down and I wasn't able to find a solution. Using "overflow: hidden" only hid the scroll bar but the extra space at the bottom of the page was still there.

I was not able to match backgrounds with the example images for the design which triggered my intentions to make everything to perfection.

I had a hard time upscaling the mockup image for desktop using media query, when I was able to fix it i realized it was with a mistake I didn't noticed. Without realizing I used: " width: 100vh" which I later realized but also I see it works but I know it's not correct.

Any feedback is appreciated, thanks :)

Community feedback

  • Sahand Masoleh•1,210
    @sahand-masolehPosted over 2 years ago

    Hi there!

    • You have set a height of 100vh on your main element, and your header element has a margin -top of 300px. Thus you get 100vh + 300px, hence the overflow. Tip: it's easier to find the source of overflow problems from the dev tools in the browser, rather than your code.

    • Try background-size: cover for you background and see if it fixes your background problem. You shouldn't set a pixel value for a background that is supposed to cover the entire view, because people might have bigger of smaller screen than yours.

    Good luck!

    1
    CharlieeLuna•260
    @CharlieeLuna23Posted over 2 years ago

    @sahand-masoleh Thanks a lot! I've been working on it a little bit and what you mentioned about de vh + px helped a lot.

    1

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