QR code component Fully responsive for phone as well as computer......

Some recommendations regarding your code that could be of interest to you.

If you want that this solution is responsive, I suggest some techniques without using media query for this solution. Also, I recommend avoiding repetition in your code and not using styles that don't work.

• If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
• For the color of the screen, you can use the recommended color in the body

body {
  /* background-color: hsla(195, 43%, 91%, 0.72); */
  background-color: hsl(212, 45%, 89%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

• When you use flexbox in the body, you don't need to use left, top in the .qr_code to center the card
• If you use max-width, the card will be responsive and you can reduce the width a bit

.qr_code {
    /* height: 484px; */
    /* width: 335px; */
    max-width: 300px;
    padding: 20px;
    background-color: white;
    /* position: absolute; */
    /* top: 19%; */
    /* left: 38%; */
    border-radius: 12px;
}

• In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

.qr_code img {
    /* height: 290px; */
    /* width: 302px; */
    width: 100%;
    border-radius: 8px;
}

• You'd better add margin to texts

.image_content h1{
    /* padding: 10px; */
    /* margin-top: -25px; */
    margin: 20px 0;
}

.image_content p{
    margin-bottom: 20px;
}

• Finally, if you follow the steps above, the solution will be responsive
• You can remove media queries and these styles below to clean the code because you don't need to use them

/* .imgqr {
   padding: 28px;
   margin-left: -12px;
   margin-top: -14px;
} */

/* .image_content{
    margin-left: -8px;
} */

Hope I am helpful. :)

Hello! 🖐️ Well done on completing the challenge

I have some interest and feedback with your code

That i like:

1. I appreciate the similarity of your results with the design, a bit different in scale and background but still good
2. html is pretty good, not too nested 👍

My Feedback:

• I suggest you use html semantic convention, for example <div class="container"> to <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: he

• I don't think css naming is right, because it still doesn't represent what it's for

  i think this more suitable:

  • qr_code → container
  • imgqr → img or img-qr
  • image_content → content or description

• it’s not too responsive on mobile, to fix it change style into this:

  @import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300&display=swap');
        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
      body{
          background-color: hsla(195, 43%, 91%, 0.72);
          font-family: 'Outfit', sans-serif;
  
          /* to make qr code card center */
          min-height: 100vh;
          display: grid;
          place-items: center;
  
      }
      .qr_code {
  
          /* use padding in here instead in imgqr to make padding equal beteen image and content */
          padding: 16px;
  
  	/* height: 484px; */
      /* set dynamic width */
  	width: 100%;
      /* add max width */
      max-width: 335px;
  
      /* remove margin */
      /* margin: 0 auto; */
  	background-color: white;
  
      /* use relative instead */
  	position: relative;
  	/* top: 19%; */
  	/* left: 38%; */
      border-radius: 12px;
  }
  .qr_code img {
      /* remove height */
  	/* height: 290px; */
      /* use dynamic width */
  	width: 100%;
  	border-radius: 8px;
  }
  
  /* you can remove this */
  .imgqr {
  	/* padding: 28px; */
      
      /* remove margin */
  	/* margin-left: -12px; */
  	/* margin-top: -14px; */
  }
  
  .image_content h1{
      font-size: 22px;
      font-weight: bolder;
  
      /* change padding */
      padding: 0 10px 10px 10px;
  
      /* remove this */
      /* margin-top: -25px; */
      text-align: center;
      
  }
  .image_content p{
      font-size: 16px;
      text-align: center;
      color:  hsl(210, 8%, 56%);
  }
  

• Maybe you can use tools like prettier to format your code to be more beautiful ( TIP: set prettier configuration to format on save, make it easier )

you can contact me in my linkedin or reply this if have question 👐.

anyways overall is good, nice solution, hope it's helpful 🙌