qr responsive page using box model, media query and flex

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgo

  Posted about 2 years ago

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

  • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  • If you use max-width, the card will be responsive and you can increase the width a bit
  • You'd better add text-align: center to center texts

  .container {
    /* width: 250px; */
    /* height: auto; */
    max-width: 300px;
    text-align: center;
  }
  

  • You'd better update the texts in this way:

  h3 {
    color: hsl(218, 44%, 22%);
    font-weight: 700;
    /* padding-left: 20px; */
    font-size: 20px;
  }
  

  p {
    font-size: 15px;
    color: hsl(220, 15%, 55%);
    /* padding: 2px; */
    /* text-align: center; */
    padding-bottom: 20px;
  }
  

  • You don't need to use .maincon and you can remove it

  /* .maincon {
    height: 100vh;
    display: grid;
    place-items: center;
  } */
  

  • Finally, you can remove the media queries because the solution will be responsive if you follow the steps above.

  Hope I am helpful. :)

  00

  Marked as helpful