QR Code Component using HTML CSS

Community feedback

• 

  Darkstar•1,310

  @DarkstarXDDPosted about 2 months ago

  Nice solution. I have couple of suggestions.

  • You should never give a fixed height for text containers. In your card__content class you are using a fixed height. If some more text were added to the children of that element, text will overflow. Because of the fixed height the container can't grow freely to fit all the text content. There's no need to specify height for text containers. The browser will calculate it for you based on the content inside the element, and stuff like font size, padding etc.
  • Same with the height: 100vh on main. Use min-height: 100vh there, so your main can grow if needed.
  • I wouldn't use a background image here. I would use an img tag, so that i can give it an alt text like "QR code leads to frontendmentor.io". Currently if a screen reader user comes across this component there is no way for them to know that there is a QR image present in this.

  But yeah, other than that, it's a nice solution.

  Marked as helpful

  0

  ---

  

  P

  Matthieu Bonjour•190

  @Matthieu83600Posted about 2 months ago

  @DarkstarXDD

  You are absolutely right with your suggestions; I've made the necessary changes. 😊

  0
• 

  Rizki C S•10

  @rizkirisjadPosted 2 months ago

  nice

  0

  ---

  

  P

  Matthieu Bonjour•190

  @Matthieu83600Posted 2 months ago

  @rizkirisjad

  Thank you

  0
• 

  Marcone Lentz Boff•20

  @m4rconePosted 2 months ago

  Ponto positivo que encontrei que difere da minha solução é o uso de variáveis no css. Única dúvida que fiquei é por que não utilizou a tag <img> e sim uma div que carrega o background da imagem do QR code.

  0

  ---

  

  P

  Matthieu Bonjour•190

  @Matthieu83600Posted 2 months ago

  @m4rcone

  Si je devais modifier mon code, je pourrais ajouter du texte par-dessus l'image, par exemple, sans avoir besoin d'utiliser d'index.

  0