QR Component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Marcelo Vazquez Gutierrez! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉

  Regarding your question, I would make the body element as the flex container, or in other words, I use flexbox to center the card. You can use grid if you want. I try to avoid using absolute positioning whenever a more robust or modern solution exists.

  There is something interesting in the way you make the card in the middle of the page. Why do you want to make the body element set to position: fixed;?

  I have made some changes in my dev tool to make the card centered both vertically and horizontally. (remove all the commented code)

  body {
      margin: 0;
      /* padding: 0; */
      /* width: 100%; */
      /* height: 100%; */
      /* position: fixed; */
      /* top: 0; */
      /* left: 0; */
      /* right: 0; */
      /* bottom: 0; */
      display: flex;
      justify-content: center;
      align-items: center;
  
  
      /* Use min-height to make the card vertically center */
     /* Also it allows the body element to grow if ever needed */
      min-height: 100vh;
  
  
      /* prevent the card from touching the edges of the browser */
      padding: 2rem;
  }
  
  main {
      /* position: relative; */
      /* top: 50%; */
      /* transform: translate(0, -50%); */
  }
  
  .card-container {
      /* width: 280px; */
      /* display: grid; */
      /* place-items: center; */
      background-color: var(--white);
      border-radius: 20px;
      padding: 20px;
      margin: 0 auto;
      margin-bottom: 20px;
      box-shadow: 0 0 23px 0px rgb(138 138 138 / 75%);
  
      /* Use max-width instead to limit the card width */
      max-width: 27rem;
  }
  

  That's it! I hope this helps. 😊

  Marked as helpful

  0

  ---

  

  Canti•110

  @Canti21Posted over 2 years ago

  @vanzasetia Hey, thanks for the feedback :)

  The reason for that position: fixed; and all the inset is to prevent any scrolling in the page. I've learned that some time ago, but your solution seem a lot better to me, I'll keep it in mind for future projects.

  Peace.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Canti21 You are welcome! 👍

  You don't need to prevent vertical scrolling. If you prevent the page from having a vertical scrollbar then the users can't see the rest of the content if the content needs more than the users' viewport height. It commonly happens when the users see the page on mobile landscape view.

  In general, you want to prevent horizontal scrolling. Horizontal scrolling can make the user experience bad since the users have to keep scrolling right and left when text content is outside of the viewport width.

  0
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Good job completing this challenge

  Keep up the good work

  Your solution looks great however to answer your question you can also use margin: 0 auto.

  I hope this helps

  Cheers

  0