Submitted 5 months ago

Meet landing page using Flexbox and CSS grid

andiaz•150

@andiaz

Preview site View code

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?

I am most proud of feeling as if, generally speaking, I am in control when using both Flexbox and CSS grid now. I am also happy that I started using a mobile-first approach to the implementation, this makes things much easier to implement from my experience.

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

Handling the background images and its properties was a challenge but in the end I think it worked out quite nicely.

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

I'd like to know how, given my current solution, I'd make the images to the left and right of the hero section (on larger resolutions) span slightly off "canvas" (outside the viewport). I can't get it work after trying various ideas so any feedback there is much appreciated! :)

Community feedback

mantis•240
@morauszkiaPosted 5 months ago
Your solution looks and works great! I also like your utility classes. Regarding the hero images, I added a width, that is larger than 100% to the img/div so that it overflows at the edges, and an overflow-x: hidden (I think, to the body) so that I don't get a scrollbar at the bottom due to the overflow.
0
andiaz•150
@andiazPosted 5 months ago
@morauszkia Thanks, appreciate it! :) Right, yeah that's how I solved it on smaller resolutions as well, but for some reason I can't get it to work on higher resolutions. Not sure if it has to do with the content using flex or not...
0
mantis•240
@morauszkiaPosted 5 months ago
@andiaz: Probably. In my code, the difference is, that for smaller screens I added max-width directly to the img, and on larger screens, where I used flexbox, I added max-width to the flex container and not directly to the images, which shrink to fit the container. To those I only added a flex-basis to have control over the ratio of the images to the container in the middle with the text.
0

Please log in to post a comment

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