Skip to content
Submitted 6 months ago

Meet landing page (SCSS, BEM, Grid, Flexbox)

Gwenaël Magnenat•1,290
@gmagnenat
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 are you most proud of, and what would you do differently next time?

Quite happy about the hero section and the overflowing images.

Next time

Really stick to a mobile first implementation. I lost track because I wanted to fix something on the desktop version and then it was endless back and forth between breakpoints.

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

It was challenging to stay organised and I often lost track of what I was doing. I found myself fighting a lot with responsive values. It is very important as the project get bigger to keep a consistent workflow and it saves a lot of time to stick to a mobile first implementation.

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

I feel there's a lot of micro styling on elements for fonts and spacing. There must be a way to make this more consistent. I will keep refactoring and pushing update to this solution.

Community feedback

  • Eli Silk•660
    @elisilkPosted 3 months ago

    Hi 👋 @gmagnenat,

    Congrats again on a great solution. 👏 I love your use of Sass, and your overall implementation of the hero section and the overflowing images was great.

    I did notice a slight issue with how you implemented the centering of your hero image that you might want to consider a little further. Specifically, when you are in the mobile or tablet view and using the single hero image, you have the following styles set:

    .hero {
    &__illustration__image {
        max-width: calc(100% + 4rem);
        margin-left: -2rem;
        @media screen and (min-width: 62em) {
            max-width: 100%;
            margin-left: 0;
        }
    }
}

    This works well when the viewport/container width is less than the width of the image (minus that extra margin), but then is off-center when the viewport/container width gets larger than that (and then before you switch 62em or 992px). In my solution to this challenge, I used absolute positioning, but I like your solution much better since the hero image resizes fluidly at different viewport sizes. So, I thought about a possible adaptation to your solution, and came up with this clamp function that utilizes your -2rem as the max value for the left margin, 0 as the min value, and then dynamically calculates a more appropriate value that will center the image when the viewport is in those awkward middle viewport sizes. Here it is:

    margin-left: clamp(-2rem, calc((820px - 100vw) / -2), 0px);

    I'm interested to know what you think of this idea 🤔, and if it works for what you're trying to do in this case.

    Happy coding. 💻

    Eli

    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