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 grid

Joel 590

@JoelLH


Design comparison


SolutionDesign

Solution retrospective


Hi, this is my solution for the Huddle landing page challenge. I used grid for the whole layout and margins for the details. I find its hard for the site to look good in all of the screens widths, so if u have any suggestions, pls let me know. Thanks!

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, Joel! 👋

Good work on this challenge! 👍 Your solution looks great and is responsive! 👏

One or two suggestions I have are,

  • Turning the social media links in at the bottom of the page into actual links by wrapping each of them in a link tag.
  • Using background-size: cover for the background image in this challenge so that it does not appear to be squeezed or stretched when the size of the screen changes.

It can be challenging to make designs look good for all screen sizes! What you have here is good, though. I think you can allow the illustration to shrink in a size a bit more in the desktop layout so that you can switch to the mobile layout a bit later. In the mobile layout, you might be able to increase the max-width of the content just so that it takes up a bit more space when the layout first changes (but not too much)! 😉

Hope this helps. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

2
faizan 2,420

@afaiz-space

Posted

Hey @JoelLH,

  • Background image used in the body element of CSS file.
1

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