Skip to content
Submitted about 4 years ago

Huddle landing page using Mobile First workflow, GRID and FLEX

María Daniela•185
@mdagudo
A solution to the Huddle landing page with a single introductory section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello! I finally feel like I achieved the fluency with the responsive design, I think it works well in any size. I'm still learning to use rem units, so if you have any advice, trick, or comment, please check my code and let me know :)

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Patrick•14,265
    @palgramming

    well I think you have a good start on this project and I do not think it is a easy one but I would tell you to go back and look at the hero image as the design transitions from mobile to desktop at the 603px view-port size and see if that is what you really want your design doing. I struggled with making things fluid and then I realized it is more about controlling the design at the different screen sizes and not just making the page scale smoothly

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hello, María Daniela! 👋

    Good effort on this challenge! 👍

    A few things I suggest are,

    • Making sure there's always a little bit of space between the image and the text content to the left of it in the desktop layout (even when the width of the screen grows smaller).
    • Adding background-size: cover to the background image to make sure that it always covers the entire area of the screen (even at various screen sizes).
    • Switching to a mobile-friendly layout a little sooner to prevent the image from becoming too small right before the layout changes from desktop to mobile. 😉

    Keep coding (and happy coding, too)! 😁

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