QR-code component project

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, you'd better add align-items: center; and min-height: 100vh to the body

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

  • If you use flexbox in the body, you don't need to use margin and display in the .card to center the card
  • If you use max-width instead of width and height, it makes the card responsive
  • If you want to give the gap between the content and the border of the card, you can use padding

  .card {
    /* height: 100%; */
    /* width: 250px; */
    max-width: 250px;
    padding: 15px;
    /* display: in-block; */
    /* justify-content: center; */
    /* margin-top: 100px; */
    /* margin-bottom: 100px; */
  }
  

  • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better remove height

  .image {
    width: 100%;
    /* height: 50%; */
    border-radius: 15px;
  }
  

  • After following above, the card will be responsive. Finally, you don't need to use media query for this solution

  /* 
  @media screen and (max-width: 375px) {
  } 
  */
  

  Hope I am helpful. :)

  0
• 

  Bader Idris•2,880

  @Bader-IdrisPosted over 1 year ago

  You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

  .container {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  

  the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

  0