Profile card component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 12 months ago

  Hello there 👋. Good job on completing the challenge !

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

  • Wrap the page's whole main content in the <main> tag.

  • Avoid using overflow-hidden on your main container because it prevents scrolling on small screens like mobile devices.

    Also, w-screen might be unnecessary since, by default, it occupies 100% of the screen width and could lead to unnecessary horizontal scrollbars.

  • Using two images is a solid solution, but consider creating a custom class in Tailwind and applying it as a background-image.

  • Consider centering it using Flexbox or Grid layout instead of absolute. The latter might cause content overflow on smaller screens.

    <div class="flex justify-center items-center min-h-screen"></div>
    

    or

    <div class="grid place-items-center min-h-screen"></div>
    

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  0
• 

  Muhammad Saad•280

  @Arman001Posted 12 months ago

  Hi!

  Good work. It is not scaling down properly and on mobile it gets very compressed because of your auto scaling may be.

  Regards

  Saad

  0