Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Huddle Landing Page (Using FlexBox)

@jlmunozfdev


Design comparison


SolutionDesign

Solution retrospective


The difficulty I had was in handling the margins, the padding and I wanted to add animation but I still don't handle it well and in the end everything ended up overflowing. So I left it as it is. If you can give me some advice about the animations or anything else you see that I need to improve, I would appreciate it.

Community feedback

Eray 1,410

@ErayBarslan

Posted

Hey there, excellent work on this one! Some suggestions to improve the solution:

  • Between 500px and 1000px content overflows out of screen. You can fix this by changing the media-query.
  • If the page contains article/text in it, you'd always want to set a max-width on the container so a user with huge screen still has a good reading experience. Otherwise you'd end up having 1 line paragraphs. With a little refactor you can use:
body {

    ...
    justify-content: center;
} 
/* Container isn't centered horizontally as it is. You can add justify-content */

.div__card {

    ...
    max-width: 680px;
}
/* This matches the design and have a better visuals for both mobile and desktop */

@media (max-width: 980px) {

  ...
}

With these changes your page becomes fully responsive for all screens. Also I'd suggest designing mobile-version first. It's a personal preference after all but general convention is to start with mobile version and I find it much better approach. You'd prevent any possible overflow since your base CSS is for small screens. Also desktop layouts happen to be more complex. With desktop first approach, we're simply removing the complexity; but we wouldn't need this with mobile first design. Happy coding :)

Marked as helpful

0

@VCarames

Posted

Congrats on completing this challenge!

Currently your background begins to move out of place when it the screen shrinks, to fix change the background-size to cover

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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