Qr code cart with html, css and bootstrap 5

Community feedback

• 

  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

  1

  ---

  

  Hasan Sertaç Yiğitoğlu•150

  @hsyigitogluPosted over 1 year ago

  @Bader-Idris Oh thank you. I will fix this now

  0
• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

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

  You don't need to use a media query (resp-style.css) for this solution and you can remove it from your code. If you want that this solution is responsive, you can follow these suggestions below.

  • If you use max-width instead of width and height, the card will be responsive
  • You'd better give padding to give a gap between the content and the border of the card

  .card {
    /* width: 350px;  */
    max-width: 350px;
    /* height: auto; */
    padding: 10px;
  }
  

  • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better change the name of picture img as img. Otherwise, it will cause bugs and avoid the card responsive because of picture

  img {
    border-radius: 10px;
    width: 100%;
  }
  

  • Finally, you don't need to use the style in .contain because you've already used flexbox to center the card and you'd better remove it. And you'd better try to avoid repetition to make your code better:
  • You can also remove picture

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

  /* 
  picture {
    padding: 20px;
    border-radius: 10px;
  } 
  */
  

  Hope I am helpful. :)

  Marked as helpful

  0

  ---

  

  Hasan Sertaç Yiğitoğlu•150

  @hsyigitogluPosted over 1 year ago

  @ecemgo Ok. I've changed this, thank you

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @hsyigitoglu happy to help, Sertaç :)

  1