QR Code Component - Responsive Web Design with HTML and CSS only

Community feedback

• 

  Bence Zámbó•510

  @zambobence

  Posted about 3 years ago

  The semantic tags are great.

  Personally, I would not use that many compound selectors in this quite simple layout, instead, I'd use an H1 for the title and a paragraph for the text. In this case, you can declare quite easily the attributes in CSS.

  I would use a fixed width for the card and add a wrapper for the card content within the <section class = "qr-code-image-with-info"> with small padding, to solve the issue with the distortion in smaller screen sizes and to have a consistent margin.

  <section class = "qr-code-image-with-info">
  <div class = "container">
       <figure class = "qr_code_image">
       ...
       <section class = "qr_code_info">
      ...
  </div>
  </section>
  

  If you follow in this way you only have to set the width of the image to 100% and by not setting height it would not distort the image either.

  You do not have to use flexbox to center the card, you can use

  .qr-code-image-with-info {
  margin: 30vh auto
  }
  

  to center it horizontally and also push it away from the top of the screen.

  I hope I could help you with my feedback and please let me know if you have any further questions.

  13

  Marked as helpful