Responsive QR code component page using CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Alay, congratulations for your new solution!

  I saw your solution and you code and I've some tips for you bro:

  1.Try to clean a bit your code, there's many divs that are not totally necessary, remember that you need only one div and its contents (img, h1 and p).

  2.Clean the css removing all the class and manage everything using the direct selector for each element since there's only one of each kind.

  See the code fixes I did for you below:

  3.Give your component responsivity by using max-width in place of width and giving the image a responsive setup with display: block and max-width: 100%(this will make the image grow 100% of the container size and respect its paddings.)

  }
  img {
      max-width: 100%;
      border-radius: 14px;
      /* width: 90%; */
      /* height: 55%; */
      /* margin-top: 5%; */
      display: block;
  }
  
  
  .center {
      border-radius: 15px;
      background: hsl(0, 0%, 100%);
      max-width: 320px;
      /* height: 65vh; */
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Alay kabir•110

  @alaykabirPosted over 2 years ago

  @correlucas I will fix the code and thanks again.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Alay, congratulations for your new solution!

  Answering your question:

  Your component card is not responsive because an issue with the image, this is due the fixed height/width youve set for the image.

  To fix this behavior, you've to make the image responsive by adding display: block; and max-width: 100%

  See the changes I've add to your code below:

  .center {
      padding: 10px;
      border-radius: 15px;
      background: hsl(0, 0%, 100%);
      max-width: 20vw;
      /* height: 65vh; */
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  
  img {
      display: flex;
      border-radius: 15px;
      /* width: 90%; */
      /* height: 55%; */
      max-width: 100%;
      /* padding: 20px; */
      /* margin-top: 5%; */
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Alay kabir•110

  @alaykabirPosted over 2 years ago

  @correlucas Thank you so much for the insights. It is really helpful.

  0