Developing a QR code - Challenge

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 that this solution is responsive, I recommend some techniques without using media query for this solution but it's up to you whether you use it or not

  • 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 flexbox in the body, you don't need to use flexbox and margin in the .content to center the card
  • If you use max-width instead of width, the card will be responsive

  .content {
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */
    /* width: 280px; */
    /* margin: 100px auto; */
    max-width: 280px;
  }
  

  • 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

  .content img {
    /* width: 280px; */
    width: 100%;
  }
  

  • You don't need to give width to text, otherwise it prevents that the card will be responsive

  .content .text {
    /* width: 240px; */
  }
  

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

  Hope I am helpful. :)

  Marked as 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

  Marked as helpful

  0