Responsive QR Code component page

Community feedback

• 

  Phenics13•60

  @Phenics13

  Posted over 2 years ago

  Hi there! I want to give you some pieces of advice how to solve problems which I faced during this challenge too and level up your frontend skills.

  How to avoid Accessibility report warnings.

  Use semantic HTML tags to avoid warning "Document should have one main landmark". Just wrap your div with class "attribution" in main tag like so:

  <main>
    <div class="attribution">
    </div>
  </main>
  

  How to solve difficulties with height and width.

  Before implementing a challenge in a code you can try to copy the given design in Figma. Just open Figma, place the design image in it, change the opacity of the image to 50% and just create design blocks over the image. Doing so you will be able to know height and width of some basic design elements.

  I hope, my feedback was helpful 💪

  Let's improve our frontend skills together 🎉

  00

  Marked as helpful
• 

  Agnik Bakshi•480

  @Agnik7

  Posted over 2 years ago

  Hi, Congratulations on completing this challenge. While looking at your site, and going through your code, I found some things, that I believe will be helpful for you.

  • The Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. part is supposed to be the footer. It would be better to keep it towards the end of the body and replace the respective div with the footer tag.

  <footer class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="#">Bheru Singh Panwar</a>.
    </footer>
  

  • Try using relative units like rem and em more than absolute units like px for better responsiveness of the page.
  • Center the card component using grid or flexbox. This will ensure that the component always stays at the center irrespective of the screen size.

  To center using flexbox

  body{
  min-height : 100vh;
  display : flex;
  justify-content : center;
  align-items : center;
  }
  

  To center using grid

  body{
  min-height : 100vh;
  display: grid;
  place-items : center;
  }
  

  • When reducing the screen-size, the card shrinks way more compared to its contents, thereby failing to be responsive as a whole. Replace the percentage value of the max-width in .card with a value in rem.

  .card{
  max-width: 20rem;
  ---rest of code inside .card---
  }
  

  • Use shorthand notations for defining different attributes like margin and padding. To learn more about CSS shorthands, click here

  Hope this feedback helps you improve as a developer. Please feel free to correct me in case I said anything wrong.

  Have a nice day!!

  00

  Marked as helpful