Responsive QR code component

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  If you want that this solution is responsive, I recommend some techniques without using media query for this solution but it's up to you whether you use it or not

  • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
  • For the color of the screen, you can use the recommended color in the body

  body {
        /* background-color: #b1c5d4;  */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: hsl(212, 45%, 89%);
  }
  

  • If you use flexbox in the body, you don't need to use flexbox and margin in the #card to center the card, you can remove them to avoid repetition
  • If you use max-width instead of width and height, the card will be responsive
  • You'd better give padding to give a gap between the content and the border of the card

   #card {
        /* width: 280px; */
        max-width: 280px;
        /* height : 430px; */
        /* margin: 0 auto; */
        /* display: flex; */
        /* flex-direction: column; */
        /* justify-content: center; */
        /* margin: 200px auto 5px auto; */
        padding: 15px;
      } 
  

  • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% and height: 100% for the img

  .image-qr-code {
        border-radius: 20px 20px 20px 20px; 
        /* padding: 15px; */
        width: 100%;
        height: 100%;
  }
  

  • Finally, you don't need to use media queries for this solution because the card will be responsive if you follow the steps above

  Hope I am helpful. :)

  Marked as helpful

  1
• 

  dimar hanung•560

  @dimar-hanungPosted over 1 year ago

  Hello 👋, Well done on completing the challenge – you did it! 🌟

  I have some interest and feedback with your code

  That i like:

  1. I appreciate the similarity of your results with the design, a bit different in scale and color but still good
  2. html is pretty good, not too nested 👍
  3. CSS Naming is also good, represent what is it for, like <div class="card"> for card section

  My Feedback:

  • I suggest you use html semantic convention, for example add <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here
  • for card section i’m prefer to use class instead id, because card is component which may be used again and again.
  • In galaxy fold (280px x 653px) is not to responsive, you can fix it by using dynamic width in image
    • remove margin in #card add padding 15px in #card
    • remove padding in .image-qr-code and add width: 100%; in .image-qr-code

  anyways overall is good, nice solution, hope it useful 🙌

  Marked as helpful

  0

  ---

  

  krizzzzzzzz•20

  @krizzzzzzzzPosted over 1 year ago

  @dimar-hanung Thank you for taking your time! Noted the feedback and I'll work on it.

  0