Skip to content
Submitted 11 months ago

Responsive meet landing page with Grid

bem
edpau•470
@edpau
A solution to the Meet landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

When resizing the window, instead of having the hero images resize, I made them behave like in the Figma design, where they stay the same size and are evenly cropped from both the left and right sides. I used flexbox to ensure that the hero images disappear equally on both sides as the window is resized.

But I have to wrap the hero content in an extra div for better control. Please kindly comment on my approach, is there anything I can do better?

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Eli Silk•1,080
    @elisilk

    Hi @edpau 👋,

    Thanks for commenting on my solution. That's much appreciated!

    I took a look at your solution for the hero image and it is a really cool approach. I definitely prefer solutions that make use of Flexbox over absolute positioning, so that is great and something I will want to try out myself.

    One small thing I noticed is that on the .hero-container class, you set the min-width: 1500px; and that results in the hero not being centered when the viewport width is between 1500px and your breakpoint at 1130px (and sometimes that means horizontal scrolling). I think you could fix that by just adding an overflow: hidden; to your .hero class. So maybe give that a try? 🤔

    I also like your README file. It's great that you explain some of the thinking behind the different aspects of your solution. For the footer, I think you should reconsider your current approach and take a look at this MDN article on "Multiple backgrounds":

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds

    It says you can layer backgrounds on top of each other, but "Only the last background can include a background color." That is a little problematic for this situation because we effectively want the color to be on top of the image. However, you can get around that limitation by making the first/topmost background linear-gradient, and using an RGB color with an alpha value specified (so it's a little transparent). And then that semi-transparent color is layered on top of the second background, which in this case is the image. Here is an example that corresponds to what I did:

    background:
      linear-gradient(rgba(77 150 168 / 0.9), rgba(77 150 168 / 0.9)),
      url("assets/desktop/image-footer.jpg") no-repeat center center / cover;

    This multiple background approach feels to me a lot simpler than working with pseudo-elements and z-indices. Give it a try!

    Happy coding! 💻

    Eli

    Marked as helpful
  • Matias Altier•130
    @matiasaltier

    Nice solution, practically the same and very good use of BEM. I really like your way of coding

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