QR Code Component Solution

Community feedback

• 

  Abdul•8,560

  @Samadeen

  Posted over 3 years ago

  Hey!! Cheers 🥂 on completing this challenge.. . Here are my suggestions

  1. You can use the transform property to scale down your card a little bit.

  2. Its preferable to use %, em, rem, vh, vw, instead of px in most cases.. it helps in responsiveness.

  3. Its best you use CSS variables especially when you have values you are using reoccurringly . Regardless you did amazing.. Happy coding!!!

  10
• 

  Joseph Maramba Weyao•195

  @mamba-dev-KE

  Posted over 3 years ago

  Hey there, nice implementation here. My recommendation for you here is to:

  • Explore more use of relative units i.e. rem, em, ch, % as opposed to fixed units such as px as they are the best when working with responsiveness in mind.
  • For example, you have set a fixed width and height for the card. The best way to achieve this would be to use percentage (%) on the card and set a max-width on your container to control the growth of the card.
  • You can also leave height to be auto calculated based on the content of your card instead of setting an explicit fixed height.
  • Explore custom properties in CSS for setting the properties that are are used in many elements as this would make your code more maintainable in case you need to change something that has been used multiple times.

  12
• 

  Akhlak Hossain Jim•1,325

  @Akhlak-Hossain-Jim

  Posted over 3 years ago

  Great work Ryan. Try these recomandations:

  • your code

  <footer>
        <div class="attribution">
          Challenge by
          <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
            >Frontend Mentor</a
          >. Coded by <a href="https://github.com/RyanFloresTT">Ryan Flores</a>.
        </div>
      </main>
  </footer>
  

  Should be

  </main>
  <footer>
        <div class="attribution">
          Challenge by
          <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
            >Frontend Mentor</a
          >. Coded by <a href="https://github.com/RyanFloresTT">Ryan Flores</a>.
        </div>
  </footer>
  

  • try using css variables

  Happy coding:)

  11