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 with a single introductory section resolution

@Isis-gsantos


Design comparison


SolutionDesign

Solution retrospective


Hello!! I had difficulty adjusting the image on mobile (375px), I couldn't adjust the image at the top of the screen. I'd be happy to hear if anyone finds where I went wrong.

Community feedback

@MelvinAguilar

Posted

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

There are several issues preventing you from modifying the image effectively. I would recommend, for your next project, adopting a mobile-first approach to ensure a more user-friendly solution on mobile devices:

  • The image lacks max-width: 100% property, so it won't be responsive to different screen sizes.
  • Your solution lacks box-sizing: border-box; property, making it challenging to control the sizing of elements accurately, especially with padding and borders.
  • Margins are excessively large for mobile devices (margin: 98px 80px 70px;). Consider using a media query to adjust them.
  • Avoid setting fixed widths (width: 700px;) as it causes overflow on mobile devices. Instead, use max-width when necessary.

I hope you find it useful! 😄

Happy coding!

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