QR code component

Community feedback

• 

  T

  Gwenaël Magnenat•1,270

  @gmagnenatPosted 3 months ago

  Hi, thanks for your work on this solution!

  I’ve looked over your code and have a few suggestions to help you improve it:

  CSS and Layout:

  • Add a CSS Reset: Your stylesheet doesn’t have a CSS reset. Adding one at the start of your CSS will help make sure all browsers show your styles the same way. You can use a CSS reset from places like Josh Comeau or Andy Bell.

  • Use Min-Height on Body: Instead of a fixed height for the body, use min-height. This way, the body can grow with the content and not cut off when there’s more content.

  • Card Width: Don’t set a fixed width for your card. Use rem units and set a max-width instead. This makes sure your card adjusts better with different screen sizes and user settings.

  • Image Sizing: Instead of a fixed width for the image, use width: 100% so it fills its container. Also, avoid setting a fixed height on the image so it can adjust properly with the content.

  • Font-Weight: A font-weight of 775px doesn’t make sense. Use standard numeric values like 400 or 700 instead of pixels.

  • Heading and Paragraph Width: You don’t need a max-width for headings and paragraphs, especially in pixels. Use padding on your card or the ch unit to control the width based on characters.

  • Font Sizes in Pixels: Avoid using pixels for font sizes. Use relative units like rem or em so text scales better with user settings.

  Maintainability:

  • Use Classes for Styling: Instead of styling HTML elements directly, use classes. For example, use .heading or .paragraph instead of styling h1 or p directly. This way, if you change an h1 to h2, you won’t need to update your CSS selectors.

  I hope these tips help you improve your solution. Let me know if you have any questions or need more details.

  Happy coding!

  0