Responsive Mobile Scanner

Community feedback

• 

  HIGHZIKdc•60

  @HIGHZIKdcPosted about 2 months ago

  looks good

  1

  ---

  

  shreya007•10

  @shreya27-devPosted about 2 months ago

  @HIGHZIKdc Hey! Thank you so much :)

  0
• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted about 2 months ago

  Hey, good job!

  Here are my suggestions - I hope you find them helpful!

  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" section. Wrap the card in a <main>.

  • The alt text must also say where it leads(the frontendmentor website). Remove the word "image", as that is announced by screen readers by default. 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 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • Remove the margin on body. Instead, we need to add min-height: 100svh, so the body takes up at least the full viewport height (don't set height, as that will cause overflow if the content grows taller than 100vh). By default the body is only as tall as its content - this is why the card isn't centered vertically, even though you've added align-items: center.

  • max-width on the card should be in rem. Around 20rem will work fine.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • On the image, add display: block and change width to 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.

  • Instead of .outer-container img, it's recommended to give elements a class, and use that as a selector. The reason is that .outer-container img is a descendant selector, which has higher specificity than a single class selector, and thus is harder to override. Specificity is a vital topic to understand, so I recommend that you do some research. Here are 2 explanations from highly regarded documentation sites:

  Learn specificity from MDN

  Learn specificity from web.dev

  0