QR Code Component

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello Voffee, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

  You don't really media query in this challenge all you need is to make the card responsive, I saw your code and all you miss is to replace the properties widthwith max-width: 320px; this way the card resize with the screen when it scales.

  See the code fixes I did for you:

  .container {
      background: var(--container-color);
      padding: 1rem;
      border-radius: 0.625rem;
      box-shadow: 5px 5px 5px rgb(0 0 0 / 30%);
      margin-bottom: 0.25rem;
      max-width: 320px;
  }
  

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H/hub/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

  👋 I hope this helps you and happy coding!

  00

  Marked as helpful
• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted almost 3 years ago

  Hello voffee,

  Congratulation on completing your first challenge here in frontend mentor. . Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

  • You can use <main> landmark to wrap the card and <footer> for the attribution. HTML5 landmark elements are used to improve navigation.

  • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>with sr-only class hidden visually and present for assistive tech users.

  • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor.

  CSS:

  • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

  • It's recommended to include a git ignore. This came with your starter files. It's less important in this challenge but will become extremely important as you move onto larger projects with build steps.

  Aside these , Great job on this one! Hopefully this feedback helps

  00