Simple QR Code Component made with HTML and CSS

Community feedback

• 

  P

  Darkstar•1,100

  @DarkstarXDDPosted 8 months ago

  • Don't use a fixed width for your containers. Use the max-width property instead of the width property. When you use width it takes away your containers ability to dynamically resize. You can see this issue if you go into your browsers developer tools and resize the screen to smaller screen sizers. Change your .card to have a max-width instead of width.
  • Remove the width on your <div.text>. Since the <div.text> is inside the <div.card>, it will be limited to the max width defined by the <div.card>. If you want the <div.text> to have space around it, use padding.
  • Also don't use height on containers. Let the content inside the container decide the height of the container. So remove the height property from your <div.card>
  • Your qr code image needs an alt attribute with some descriptive alt text. I would suggest something like "qr code leads to frontendmentor.io". This helps users who navigate the web using screen readers understand what the image is about.

  Marked as helpful

  0

  ---

  

  Barış Kaya•20

  @ClatronPosted 8 months ago

  Thank you for your time, I've learned a few things! Also, I applied necessary changes and now it looks a bit better. @DarkstarXDD

  0

  

  P

  Darkstar•1,100

  @DarkstarXDDPosted 8 months ago

  @Clatron Great. But your component is still not properly responsive. There are couple of reasons for that.

  • One is you still have a width defined in your <p.description>. Remove that.
  • Secondly set the width of your image to be max-width:100% instead of having a fixed width. This will contain your image inside the container (.card, in your case) and will resize when the container gets resized.
  • One more small tip. I see that you have used box-sizing: border-box; on your .card. Usually this is applied to all the elements using the * selector. Like below. This is usually included in a CSS reset. You can read about it here.

  * {
    box-sizing: border-box;
  }
  

  1
• 

  Biruk Moges•280

  @lost50U1Posted 8 months ago

  you can use an extension called luna paint on vscode to determine the sizes of the padding and margin if you want to make it pixel perfect.

  1

  ---

  

  Barış Kaya•20

  @ClatronPosted 8 months ago

  Thank you for your advice, I'll take a look @lost50U1

  0