QR-code-component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Emerenini, welcome to Frontend Mentor, and congrats on completing your very first challenge! 🙂

  I think you managed to make your first solution looking close to the design, and you did a lot of things well, such as using object-fit on your image.

  In terms of suggestions, I just got a few that can help you even in future projects:

  1. I see that you're using margin on the wrapper to center the component, which might be the reason why you needed an overflow-x in the body, as things can be pushed out by the padding and result in overflow. What you can do instead is to use flexbox or grid on the body selector for centering, and I'll use grid as an example here:

     body {
       display: grid;
       min-height: 100vh;
       place-content: center;
     }
     
     

  2. Instead of the width: 375px on the wrapper, try max-width: 375px to make it responsive, as in the card can be resized on smaller screen size. Also, change the margin on the wrapper to 1rem so that at smaller screen sizes there can be some space.

  3. Lastly, you can remove the fixed height and width on the image so that the responsiveness would work better!

  Hope this helps a bit, and enjoy your time here at Frontend Mentor!

  0

  ---

  

  Emerenini Cynthia Ngozi•110

  @cindyemePosted about 2 years ago

  @elaineleung thanks a lot for the feedback. I added max-width: 375px on the wrapper. I will look into all you've mentioned and make updates where necessary. Thank you!

  1

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @cindyeme You're welcome! Glad to hear I could help 😊

  0