product-preview-card-component-main

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have only a suggestion about your code that might interest you.

  • Using position: relative is a valid way to center an element in the middle of the screen, but the use of flexbox is generally considered a more modern and flexible approach because it requires less code and is more intuitive.

    The problem of using position: relative in this challenge:

    If you have only one component on the page and it is relatively large in height, using position: absolute with top: 50%; and left: 50%; may not work as intended in landscape mode on mobile devices ⚠️. This is because the height of the screen becomes relatively smaller compared to its width in landscape mode, which may cause the component to overflow the screen and make it difficult for users to interact with.

    • This is your solution in a real mobile device (landscape mode): screenshot-imgur (landscape mode)📸

      Explanation: The image is completely cut off, valuable information for the user is lost.

    • I can replicate the same error in your QR code challenge, and if it's cropped too much, it may make it impossible to scan the QR code. :(

      screenshot-imgur (landscape mode)📸

  I hope you find it useful! 😄

  Happy coding!

  3