QR code using CSS box model

Community feedback

• 

  Osaro Iyoha•1,080

  @osaarohPosted over 2 years ago

  Hello Bolu,

  Good work in completing the challenge. Yes CSS flexbox will help with a more responsive outcome instead of using margins to center element.

  • To center your card, I recommend you remove all the margins (top and left) you put on your "container" div. Instead add the following attributes to your "body" element:

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  

  The first three is to center all child elements horizontally and the last one takes all the size of the height of the device that sees it and centers the content vertically.

  • You can use "text-align:center" on your ".top" element to center all text

  Hope this helps.

  Marked as helpful

  1

  ---

  

  Boluwatife Damilola Somorin•10

  @BolumorinPosted over 2 years ago

  @Master-Osaro Very helpful tip master-Osaro. Thank you. Look forward to learning more from you!

  0

  

  Boluwatife Damilola Somorin•10

  @BolumorinPosted over 2 years ago

  @Master-Osaro Very helpful tip master-Osaro. Thank you. Look forward to learning more from you!

  0

  

  Boluwatife Damilola Somorin•10

  @BolumorinPosted over 2 years ago

  @Master-Osaro Very helpful tip master-Osaro. Thank you. Look forward to learning more from you!

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hi Boluwatife Damilola Somorin,

  Congratulation on completing your first frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

  • In my opinion, the alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image. For future use , the alternate should not hyphenated , it should be human readable.

  • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

  The commented rules should be removed
  body{
  
      background-color: hsl(212, 45%, 89%);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      font-family: 'Outfit', sans-serif;
  }
  .container {
      background-color: hsl(0, 0%, 100%);
      width: 100%;
      /* height: 70vh; */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 15px;
      max-width: 300px;/* use rem instead of px*/
      padding: 1rem;
      /* margin-top: 100px; */
      /* margin-left: 500px; */
      /* border-style: hidden; */
  }
  .qr {
      width: 100%;
      display: block;
      /* padding-top: 2px; */
      /* padding-bottom: 3px; */
      border-radius: 10px;
      /* margin-top: 20%; */
      /* margin-bottom: 5%; */
  }
  .top {
      /* margin-left: 40px; */
      /* padding-bottom: 80px; */
      /* margin-right: 30px; */
      text-align: center;
  }
  h3{
      font-weight: 700;
      color: hsl(218, 44%, 22%);
      margin: 1rem 0;
      font-size: 1.375rem;
  }
  p {
        /* margin-bottom: 1rem; */
      font-weight: 400;
      padding: 0 1rem;
      margin-bottom: 1rem;
      line-height: 1.6;
      /*font-family: 'Outfit', sans-serif;*/
      font-weight: 300;
      color: hsl(220, 15%, 55%);
      /* padding-top: 30px; */
      /* padding-left: 10px; */
  
  }
  

  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

  Hopefully this feedback helps. Happy coding!

  Marked as helpful

  0

  ---

  

  Boluwatife Damilola Somorin•10

  @BolumorinPosted over 2 years ago

  @PhoenixDev22 thank you so much! This was very useful! I look forward to learning more from you and the frontend community at large!

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @Bolumorin Glad it was helpful. Happy coding!

  0