QR Code [Flexbox, Inline CSS,

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

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

  • If you use max-width, the card will be responsive and you can reduce the width a bit

  .container { 
     /* max-width: 320px; */
     max-width: 300px;
  }
  

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

  img { 
    /* max-width: 80%; */
    max-width: 100%;
  }
  

  • You'd better add font-size and margin to the h1

  h1 { 
     font-size: 1.2rem;
     margin: 1rem 0;
  }
  

  • Finally, you don't need to use media queries for this solution because the solution will be responsive if you follow the steps above.

  /* @media(max-width: 355px) {
        h1 {
          font-size: 1.2em;
        }
  } */
  

  Hope I am helpful. :)

  Marked as helpful

  1

  ---

  

  oo2smh•100

  @oo2smhPosted over 1 year ago

  @ecemgo Thank you so much. I appreciate it! I applied your suggestions to my code 🙏

  1