QR code component

Community feedback

• 

  Mayank Arora•430

  @mayankdrvrPosted about 1 year ago

  Congratulations @binkivans for completing this challenge. Your design matches the solution very well.

  Here is an observation-

  1. Below 840px width of screen, the text and card gets partially hidden, the text does not wrap and the image does not resize. Maybe, you can make it more responsive by setting the maximum width of container to be upto 100% of width of its parent container(body). See if using this CSS property in image styling can make the image more responsive- max-width: 100%;
  2. Avoid using <div> element in html file and use semantic html elements throughout the code for better web accessibility.
  3. Try to use the Block Element Modifier(BEM) naming method as a good practice of naming classes for referencing html elements in the css file.
  4. The h1 heading should be used not more than once for SEO and better page rankings in every web page. Use <h1> for the heading text and <p> for the description.

  Modified css file(excluding BEM naming)-

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  body {
      font-family: 'Outfit', sans-serif;
      background-color: hsl(212, 45%, 89%);
      max-width: 100%;
      font-size: 15px;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .container {
      width: 320px;
      height: 497px;
      background-color: white;
      display: flex;
      flex-direction: column;
      border-radius: 30px;
  }
  
  img {
      max-width: 100%;
      margin: 20px;
      border-radius: 25px;
  }
  
  .text1 {
      font-weight: 700;
      font-size: 1.3rem;
      margin-top: 12px;
      margin-bottom: 12px;
      text-align: center;
  }
  
  .text2 {
      font-weight: 400;
      text-align: center;
      color: hsl(220, 15%, 55%);
      margin-bottom: 30px;
  }
  

  Awesome solution and keep it up.

  0