Skip to content
Submitted 17 days ago

Responsive landing page with CSS grid and Flexbox

P
JiaHe35354•140
@JiaHe35354
A solution to the Meet landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of successfully setting a background image for the footer using position: absolute and z-index: -1, along with applying a background color that covers the entire footer.

Next time, I’d use the background-image property instead, but I understand that it’s not ideal for responsive images — especially when you need to switch images for different screen sizes.

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

I struggled with setting the background image using background-image in CSS because it wasn’t responsive. Then I realized that background-image alone isn’t ideal for responsive images. After that, I discovered the <picture> element and used it to serve different images based on the screen size.

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

I think it’s the responsive layout using root font-size for different screen sizes. I should practice more to improve in this area.

Code

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•5,480
    @thisisharsh7

    Hey, great job on completing this project! Your soluition is clean HTML and well-structured layout using CSS Grid and Flexbox.

    Some suggestions:

    • Fro responsive projects consider using rem or clamp() with fluid breakpoints instead of hard pixel values for paddings/margins, which makes scaling across screen sizes smoother.
    • Footer background-image layering works, but you could simplify it further by combining the background color and image via background shorthand in CSS if image responsiveness isn't critical.
    • Add a media query to center or stack the .footer-container items for smaller screens.

    Overall, impressive work — happy coding

    Marked as helpful
  • P
    Stern Cristian David•100
    @crstern

    Good job!

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