QR Code Component

Community feedback

• Account deleted

  Hello, Nishant. Good work on the challenge!

  I prefer you use the * selector to reset the margins and padding, and include the box-sizing of all elements.

  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  

  You would have to adjust the margin and padding to the content if you do this.

  I also want to suggest another way to center your content.

  In your CSS:

  • You can use the body selector to center the content like you did with the wrapper.

  body {
  height: 100vh; /* or 100% */
  display: flex;
  justify-content: center;
  align-items: center;
  }
  

  _ _ _ OR _ _ _

  Inside your main content selector:

  .card {
  position: absolute; /* or relative */
  top: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
  /* your styles */
  }
  

  You can use either of these centering methods if you wish. Otherwise, keep it up!

  Marked as helpful

  0
• 

  Sagi•120

  @ratsagiPosted 7 months ago

  Greetings, Nishant!

  Good job on completing the challenge!

  I have some suggestions for you to improve your solution:

  1. Use figma file if it is possible because it gives you more details about the design. If you use figma file that's provided on this challenge you will see that the paragraph with the class of mainText on the line 19 is actually is the heading.
  2. Take a look on the accessibility best practises.Try to use html semantic tags instead of div because it gives more meaning for your project. Keep away from absolute units like pixel instead use relative units. You have forgotten to add alt text for your image. here you can read more about it
  3. According to the responsivenes of the page. There is no need to use media-query here. Let browser to decide. Also when you used width property with the value of vw like this width: 19vw in class of card to limit the size of the component is bad idea because it is hard to read content inside when the size of the screen gets smaller. Instead I suggest to use max-width property with the relative unit like rem or em.
  4. In the class of card it is not necessary to use flexbox because h1 and p tags are block level element which starts in new line automatically.
  5. I suggest also css custom properties which gives you more flexibility for your code. It allows you quikly make changes without efforts.

  Hope you find this helpful.

  Happy coding!

  0