Single page QR Code in the center

Community feedback

• 

  Danyel Varejão•160

  @danyelvarejaoPosted over 1 year ago

  Hello, you need min-height: 100vh on body

  By default the body has a height according to the elements it has inside.

  body {
      margin: 0;
  
      min-height: 100vh;
      display: grid;
      place-items: center;
  
      font-family:'Outfit',sans-serif;
      background: hsl(212, 45%, 89%);
  }
  

  remember to remove translateY you used in .container

  I hope this was useful for you.

  Marked as helpful

  2

  ---

  

  mindxcircus•10

  @mindxcircusPosted over 1 year ago

  Thank you @danyelvarejao ! Tried this one too and it works! Cheers!

  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

  1

  ---

  

  mindxcircus•10

  @mindxcircusPosted over 1 year ago

  Thanks @Bader-Idris ! It worked well! :D I do agree this new Transform trick has its perk, thanks for helping me discover a better way to do it. But does it do well with mobile responsive? Or there are changes in the media query? Thanks in advance! Cheers!

  1

  

  Bader Idris•2,880

  @Bader-IdrisPosted over 1 year ago

  @mindxcircus using percentage, is always responsive, but with mobile phone if containers themselves get changed in display as block and inline-block

  0
• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

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

  • In order to center the card easily and correctly, you can add flexbox and min-height: 100vh to the body

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

  • After adding them, you don't need .container anymore, you can remove it

  /* 
  .container {
    display: grid;
    place-items: center;
    position: relative;
    transform: translateY(50%);
  } 
  */
  

  • If you want to make the card responsive and the image will be positioned completely on the card, you'd better set the image style in this way:

  img {
    border-radius: 15px;
    /* max-width: 300px; */
    width: 100%;
    height: 100%;
    display: block;
  }
  

  • Having done, you can delete media queries because your solution will be responsive after the updates above.

  Hope I am helpful. :)

  Marked as helpful

  1

  ---

  

  mindxcircus•10

  @mindxcircusPosted over 1 year ago

  @ecemgo Thank you, so much! I've tried it, it works wonderfully and now I learned to take note of some of the things you have explained in the codes! :D Many thanks!

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @mindxcircus I'm glad I was able to help and contribute :)

  0
• 

  ajeet achal•510

  @ajeetachalPosted over 1 year ago

  I wanted to take a moment to appreciate the HTML and CSS project you created. Your dedication to the project is evident in the final outcome, and it's truly impressive. The design, layout, and overall functionality of the project are top-notch, and it's clear that you put a lot of effort into creating it.

  I also appreciate your willingness to seek help when encountering a challenge, as demonstrated in your query regarding centering an object vertically. While it's unfortunate that the usual solution of 'display:flex', 'justify-content:center', and 'align-item:center' or 'display:grid', 'place-item:center' didn't work for you, it's great that you were able to find an alternative solution using the transform tag.

  Regarding your question about why the usual solution doesn't work for you, it's hard to say without seeing the code. However, one possibility is that it could be a parent-child problem of the DIV, as you mentioned. It's always a good idea to double-check the parent-child relationship and ensure that the proper attributes are applied.

  In terms of suggestions, I would recommend sharing your code with a few peers or colleagues to get their feedback. Sometimes an external perspective can help identify areas for improvement or provide alternative solutions to challenges. Additionally, keep up the great work and continue to challenge yourself with new projects and skills.

  Overall, thank you for creating such an impressive project and for being proactive in seeking solutions to challenges. I look forward to seeing your future work.

  I hope this will help you in your next project. Happy Codding,

  0