Qr component challenge using HTML, CSS

Community feedback

• 

  Amna Ashraf•850

  @Dev-Amna

  Posted 10 days ago

  🌟 You’ve done a really nice job on this QR code component! The layout is centered perfectly using Flexbox inside the .container with display: flex; justify-content: center; align-items: center, which gives it a very clean and balanced look. I really liked how you used color variables like --slate300 and applied it as the background using background-color: var(--slate300) — this is a great way to keep your theme consistent.

  🖼️ Your .main-container has a neat white background with rounded corners using border-radius: 20px and a max-width of 275px, which makes the card compact and stylish. The QR image is fully responsive because of width: 100% and height: auto, and the rounded corners are a nice touch with border-radius: 10px.

  📌 Just a small HTML issue: inside your .description, the <p> tag is incorrectly closed after the </div>. You should move the closing </p> right after the paragraph text to fix the HTML nesting. So instead of placing it outside the block, it should look like: <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>.

  📱 For better responsiveness on small screens, you already used a media query — which is awesome. Inside that media query (@media (max-width: 375px)), you could add width: 90% to .main-container so it scales better on mobile. It would look like this: .main-container { width: 90%; }.

  🎨 Another suggestion is to center the description block completely by adding margin: 0 auto in your .description CSS — so it becomes .description { margin: 0 auto; }. This ensures everything inside remains visually aligned.

  💡 And to make the card stand out more, you can apply a light shadow using something like box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) inside .main-container.

  📏 Lastly, for better font scaling on different screen sizes, you can use clamp() on your heading like this: font-size: clamp(1rem, 2vw, 1.3rem) inside your h1 styling.

  ✅ Overall, it’s a very well-done solution — clean layout, consistent styling, and great use of fonts and spacing. Just a couple of small improvements and it will be perfect! Keep up the great work! 🚀💻

  02

  Marked as helpful