Prettier to beautify the code, Gitlens to ease my commit.

Community feedback

• 

  MikDra1•6,920

  @MikDra1Posted 2 months ago

  I encourage you to use this technique to make the card responsive with ease:

  .card {
  width: 90%;
  max-width: 600px;
  }
  

  On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 600px it will lock with this size.

  Also to put the card in the center I advise you to use this code snippet:

  .container {
  display: grid;
  place-items: center;
  }
  

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  Marked as helpful

  1
• 

  Andrew Ezeani•370

  @ezeaniiandrewPosted 2 months ago

  Hi, congratulations on completing this challenge. Here are a couple of things that could improve your solution:

  • The qr-code image is not displaying. I took a quick look at your code and found the culprit:

  <img src="images/image-qr-code.png" alt="image-qr-code"/>
  

  Removing the images/ should fix the problem.

  • To style your project in a deterministic way, you need to reset the default styles applied by the browser. You can do that by adding the following resets to your stylesheet:

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

  You can read more about it here

  • You already have a good understanding on how to align items centrally. The only issue with your code is it's organization. The grid-container element is redundant. Simply remove it from your HTML and move the class to your body element and everything should work fine.
  • Most times, the width value in PX usually comes from the design provided by the designer. But in the absence of a design, we usually guess and tinker with it to see what looks best — just as you've done.
  • Based on the fact that you've successfully pushed your code to GitHub, I believe you already possess some basic knowledge on how it works. To help you further, you'll need to expatiate on the difficulties you're having when using GitHub.
  • You can improve the responsiveness of your solution by reading about CSS min function.

  Overall, you've done a good job on this challenge. Keep it up

  Marked as helpful

  1
• 

  Svitlana Suslenkova•5,320

  @SvitlanaSuslenkovaPosted 2 months ago

  <img src="images/image-qr-code.png" alt="image-qr-code"/> But you don't have image folder, maybe removed? Change the path to <img src="./image-qr-code.png" alt="image-qr-code"/>. Hope you found this comment helpful :)

  Marked as helpful

  0