Qr code made with SCSS

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 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;
  }
  

  • When you use flexbox in the body, you don't need to use flexbox and margin in the .main to center the card
  • If you use max-width, the card will be responsive and you can reduce the width a bit
  • You'd better update padding to give a gap between the content and the border of the card

  .main {
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: space-around; */
    /* align-items: center; */
    /* width: 400px; */
    /* height: 600px; */
    /* margin: 10% auto; */
    /* padding: 0%; */
    border-radius: 6%;
    background-color: hsl(0, 0%, 100%);
    padding: 15px;
    max-width: 300px;
  }
  

  • You don't need to use these style below for img

  .main .blue-container img {
    /* display: block; */
    /* min-width: 100%; */
    /* font-weight: 700; */
  }
  

  • If you give the width to texts, it will prevent the card becomes responsive for this solution
  • If the styles don't work, I recommend you don't use them
  • You'd better update texts in this way:

  .title {
    /* display: block; */
    /* max-width: 85%; */
    /* font-size: small; */
    /* position: relative; */
    /* bottom: 0rem; */
    font-weight: 700;
    text-align: center;
    color: hsl(218, 44%, 22%);
    margin: 20px 10px;
    font-size: 10px;
  }
  

  .body {
    /* display: block; */
    /* font-size: larger; */
    /* position: relative; */
    /* bottom: 2rem; */
    /* width: 80%; */
    color: hsl(220, 15%, 55%);
    text-align: center;
    font-weight: 400;
    margin: 10px 0 40px;
    font-size: 15px;
  }
  

  • Finally, you don't need to use media queries and you can remove them because the solution will be responsive if you follow the steps above.

  Hope I am helpful. :)

  Marked as helpful

  1