Responsive QR Code Card Using HTML and CSS

Community feedback

• 

  Boris•2,870

  @mkborisPosted 8 months ago

  Hi Jana, great job, here are some suggestions

  • To get your component properly centered, on your body add

      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; 
  

  • Your .scene should have a max-width in rem and not width.
  • Your img should have a max-width: 100%. Avoid setting fixed widths and heights on elements as that's going to probably cause some issues with responsiveness. Use max-width and percentages as units is a good option.
  • You don't really need media queries for this challenge and it can be styled the same for mobile as well as large devices. But if you want to, media queries should be defined in rem not px.
  • Font sizes should be in rem not px, this article explains it better Why font-size must NEVER be in pixels.
  • You can learn more about building responsive designs here responsive design.
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one modern css reset. This will help reset a list of default browser styles.

  2
• 

  Jana•70

  @JanaAbhiPosted 8 months ago

  Thank you for your suggesstion dude!

  will change that afterwards 😊.

  0