qr-code-challenge

Community feedback

• 

  Miguel Angel•270

  @77iu

  Posted over 1 year ago

  Hello, I'm Miguel

  So that main or any other element is centered, I suggest the following:

  body{ max-width:1440px; height:100vh; display:flex; align-items:center; justify-content:center; }

  Tell me if this information was useful to you 😃.

  If you like animated buttons I invite you to visit [https://youtube.com/@77iu-CSS?si=sbpP_EDa8PN6Zvak]

  Greetings from Argentina!!👋👋👋

  10

  Marked as helpful
• 

  Pranjali Sargar•520

  @Psargar616

  Posted over 1 year ago

  Hey @FanisFFF! Great Work on the QR Code Component Challenge! 🌟

  I just had a look at your solution for the "QR Code Component" challenge, and I wanted to commend you on your outstanding work! Your code structure is incredibly clean, and your design is impressively responsive. I can see the effort you've put into it, and it really shows!

  I have a suggestion that might enhance your project even more:

  • Flex/Grid Centering: Using flexbox or grid layout can help you effortlessly center your QR code card. It's a neat trick to ensure your design looks flawless on all screen sizes.

  • Viewport-Centered Container: Make your container class take up the entire viewport's height and width. This, combined with flex or grid, will help you center the QR card effectively.

  • One quick suggestion I have is to consider placing the QR code image inside an <img> tag within a <div>. It can offer more control over the QR code's display properties and make it even more adaptable to different screen sizes.

  You can try following code tweak's to get near to the original design:

  body {
      background-color: hsl(212, 45%, 89%);
      font-family: "Outfit", sans-serif;
      font-size: 15px; 
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .card {
      /* display: inline-block; */
      background-color: white;
  // remove margins and add uniform padding for the card
      /* margin-left: auto; */
      /* margin-right: auto; */
      /* margin-top: 4%; */
      /* margin-bottom: 25%; */
      border-radius: 1rem;
      text-align: center;
      width: 300px;
      height: fit-content;
      padding: 10px;
      display: flex;
      flex-direction: column;
  
  
  }
  

  Your work is already impressive, and these suggestions are just meant to help you explore different techniques. Keep up the excellent work! If you ever need more tips or have questions, don't hesitate to ask. If you found this feedback useful, please mark this comment as helpful

  Keep up the great work, and happy coding!

  10

  Marked as helpful