Skip to content
Submitted about 1 month ago

meet landing page

P
toshirokubota•720
@toshirokubota
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Meet landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I struggled to make the footer image right. I tried various background-blend-mode, color overlay with different alpha values, etc. I finally got something looks ok.

I thought I would have a hard time making up the circled number, but it went fairly smoothly, thanks to the flexbox.

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

I really appreciate any comments/suggestions/encouragements.

I often overlook handling of interactive elements, setting right margins/paddings, choosing right fonts. I appreciate if you can point out any oversight on my part.

Community feedback

  • Youssef Mohammed•320
    @YussefMoPosted about 1 month ago

    Hello good work on completing this challeng, I checked your solution and found that the page is not scaling well on any screen wider than 1440px. The issue is in this CSS code:

    main {
    width: 100%;
    max-width: 1440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 2rem 2rem 0 2rem;
    background-color: var(--white);
    overflow: hidden;
}

    You're using max-width: 1440px;, which means that whenever someone visits your website on a larger screen, it won’t display properly. Always make sure your website scales properly on any screen width or height.

    My advice is to remove the max-width so the layout adapts correctly to all screen sizes.

    Marked as helpful
    0
    P
    toshirokubota•720
    @toshirokubotaPosted about 1 month ago

    @YussefMo Thank you for pointing it out! I will correct it!

    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