QR Code Component Using HTML and CSS

Community feedback

• 

  Aakash Verma•9,520

  @skyv26Posted about 2 months ago

  Hi @davistar21,

  Overall, great work! 😊 Your HTML structure is clean and well-organized. 👏

  However, I have a couple of suggestions for improving the design:

  1. To center your card both vertically and horizontally, you can use the following CSS:

     body {
         place-content: center;
         display: grid;
         min-height: 100vh;
         font-family: Outfit, sans-serif;
         background: hsl(212, 45%, 89%);
     }
     

     This will ensure your card stays centered on the screen, regardless of the viewport size.

  2. Regarding the image, since you're fixing its width and height, it tends to overflow on smaller screens. To make it responsive, try removing the fixed height and using width: 100% instead:

     img {
         width: 100%;
         border-radius: inherit;
     }
     

     This way, the image will scale properly without overflowing the card. 📱

  Hope these tweaks help!

  Best, Aakash

  Marked as helpful

  1

  ---

  

  davistar21•110

  @davistar21Posted about 2 months ago

  @skyv26 thanks so much Aakash. They really did help. All the best to you as well!

  1

  

  Aakash Verma•9,520

  @skyv26Posted about 2 months ago

  @davistar21, you are welcome. I am glad my suggestion helped you 🤠

  1

  

  mkalkandev•160

  @mkalkandevPosted about 2 months ago

  @skyv26 I need feedback on my Fylo landing page. Can you help me make it better with your comments?

  https://www.frontendmentor.io/solutions/mobile-friendly-landing-page-using-flexbox-and-grid-2Qhk36Hs8Z

  1

  

  Aakash Verma•9,520

  @skyv26Posted about 2 months ago

  @mkalkandev sure I will look into asap

  1
• 

  P

  Øystein Håberg•12,720

  @Islandstone89Posted about 2 months ago

  Hey, here is some feedback :)

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" content. Wrap the card in a <main>.

  • The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  CSS:

  • Including a CSS Reset at the top is good practice.

  • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

  • Remove the margin on the card.

  • To center the card horizontally and vertically, I would use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  

  • Remove all widths and heights in px. We rarely want to give a component a fixed size, as we need it to grow and shrink according to the screen size.

  • We do want to limit the width of the card, so it doesn't get too wide on larger screens. To solve this issue, give the card a max-width of around 20rem.

  • On the image, add display: block, height: auto and max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

  • As the design doesn't change, there is no need for any media queries. When you do need them, they should be in rem or em, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens.

  Marked as helpful

  0

  ---

  

  davistar21•110

  @davistar21Posted about 2 months ago

  @Islandstone89 Now this is beyond helpful! This is golden! Thanks a bunch for leaving this reply here. I will most definitely implement these corrections next time. I really do appreciate.

  1

  

  mkalkandev•160

  @mkalkandevPosted about 2 months ago

  @Islandstone89 I need feedback on my Fylo landing page. Can you help me make it better with your comments?

  https://www.frontendmentor.io/solutions/mobile-friendly-landing-page-using-flexbox-and-grid-2Qhk36Hs8Z

  1

  

  davistar21•110

  @davistar21Posted about 2 months ago

  @mkalkandev Bet!

  0