QR code Component using HTML and CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello TomoFromEarth, congratulations for your new solution!

  Answering your question:

  To make the container shrink you've to fix the issue fixed width you've applied to the container.

  The main difference between width and max-width is that the first property is fixed and the second is flexible, for example, a component with width: 28rem will not grow or contract because the size will be ever the same, but a container with max-width: 28rem or min-width: 28rem can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  .main-container {
      display: block;
      margin-top: 8rem;
      margin-bottom: 8rem;
      border-radius: 1.75rem;
      text-align: center;
      /* height: 43rem; */
      max-width: 28rem;
      padding: 16px;
      background-color: hsl(0, 0%, 100%);
  }
  

  Make the image responsive and scale with the container size using display: block and max-width: 100%. Look the changes I've done to your code:

  #image {
      /* border-radius: 1.25rem; */
      /* width: 90%; */
      /* height: auto; */
      /* margin: 1.25rem; */
  }
  img {
      display: block;
      max-width: 100%;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  TomoFromEarth•20

  @TomoFromEarthPosted over 2 years ago

  @correlucas thank you so much for the reply and detailed explanation. I remember learning this now and you’ve jolted it back into consciousness lol. Thank you again!

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi there! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉

  For the responsiveness of the card, there's no need for media queries. The only thing that the card needs to be responsive is a max-width. This way, the card width is limited to prevent the card from filling the entire page horizontally. Also, it still allows the card to shrink if ever needed.

  So, I recommend removing the width and height from the card styling. For the height of the card, let the elements inside the card control the height of it. This way, if you change the page content or the size of the elements, the card can automatically adjust the height to fit the content.

  More suggestions for improvements.

  • Use main tag instead of div with role="main". Semantic HTML should be the first thing that needs to be used whenever possible.
  • I suggest fixing the alternative text for the QR code. Telling the users about the background color of the QR code is not providing useful information. Instead, tell the users about the QR code.
  • The styling of the card on desktop and on mobile is the same. So, you won't need to use any media queries to make the site responsive.
  • Avoid using br elements for presentational purposes. Read what MDN documentation says about it.

  That's it! I hope this helps! Happy coding! 😁

  Marked as helpful

  0

  ---

  

  TomoFromEarth•20

  @TomoFromEarthPosted over 2 years ago

  @vanzasetia thank you so much I really appreciate the feedback and will implement the changes you suggested.

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted over 2 years ago

  Congrats on completing this challenge!

  To answer your question, you want to change your width in your main-container class to max-width and delete margin-top, margin-bottom, and height; they're not needed.

  Some other suggestions:

  To center your card, add min-height: 100vh and justify-content: center to your Body Element.

  Marked as helpful

  0

  ---

  

  TomoFromEarth•20

  @TomoFromEarthPosted over 2 years ago

  @vcarames thanks so much for the response it is much appreciated!

  0