QR Code using HTML and CSS

Community feedback

• 

  beowulf1958•1,630

  @beowulf1958Posted 3 months ago

  Congratulations on completing this challenge. I have a few suggestions:

  I noticed that the text breaks out of its container. You can fix this by removing the height: 400px; from the main section and allowing the container to adjust to the content. Use fixed heights sparingly.

  Also the text is a bit cramped. You can fix this by adding row-gap: 10px; to the main section. Now the elements are neatly spaced.

  You might want to reduce the font size on the <p> to 16px. This gives a bit of contrast to the title.

  Again, great job and keep on coding.

  Marked as helpful

  0

  ---

  

  Mariam Khan•40

  @mariamkhan04Posted 3 months ago

  @beowulf1958 Thank you so much for pointing this out! I really appreciate your feedback.

  I removed the height: 400px; from the main section, reduced the font size of the <p> to 16px as you suggested. These changes made the design more flexible and visually appealing. Thanks again for your valuable input—it truly helped improve the overall look! 🙌

  0
• 

  Alaa Mekibes•1,540

  @alaa-mekibesPosted 3 months ago

  Well done

  • Push your files directly to GitHub instead of putting them in a folder and then pushing it.

  • Use CSS variables to improve maintainability, like this:

  :root {
      --bg-color: hsl(210, 46%, 95%);
      /* Add your other colors here */
  }
  
  body {
      background-color: var(--bg-color);
      /* Other properties */
  }
  

  • The project is not very big, so I think using semantic elements like <section> is not essential.

  • Add min-height: 100vh to achieve a full-screen layout, like this:

  body {
      background-color: hsl(212, 45%, 89%);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  Great job so far, keep pushing forward, you're doing amazing!

  Marked as helpful

  0

  ---

  

  Mariam Khan•40

  @mariamkhan04Posted 3 months ago

  @alaa-mekibes Thank you so much for your feedback! 😊 I set the min-height to 100vh, and now the elements are beautifully centered and well-adjusted. I'll definitely try out using CSS variables to improve maintainability in future projects. Your suggestions are super helpful—thank you for encouraging me to keep improving! 🙌

  1
• 

  P

  lawless•130

  @djlaw90Posted 3 months ago

  Looks good to me! I think you probably just could use flexbox for this, grid is great for more complex layouts from what i've heard. I just realized there's a box shadow on the QR box I forgot on mine too ><; Great work!

  Marked as helpful

  0

  ---

  

  Mariam Khan•40

  @mariamkhan04Posted 3 months ago

  @djlaw90 Thank you so much! I honestly didn’t notice the box shadow either until you pointed it out—great eye! And you're absolutely right, I’ll try sticking to flexbox for layouts like this in the future. Really appreciate your feedback!

  0