qr-code-component using HTML & CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Yusuf, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

  Your solution is almost finished you've to fix only two things, the background and the alignment, here is my tips for you:

  First of all use the correct color for the background:

  body {
      background: hsl(212, 45%, 89%);
  }
  

  My advice for your is to use flexbox to create this alignment. For example, first of all add to the body min-height: 100vh to make the body display 100% of the browser screen size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  body {
      display: flex;
      min-height: 100vh;
      background-color: lightgray;
      place-content: center;
      align-items: center;
      justify-content: center;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Yusuf Babatunde•150

  @owocodedPosted over 2 years ago

  @correlucas after setting the body as flex the mobile view is scattered again, pls help out

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @owocoded is the preview site updated I cannot see the error, give me more details this way I help u

  0

  

  Yusuf Babatunde•150

  @owocodedPosted over 2 years ago

  @correlucas yes, it's updated u can check using your mobile phone to see the error.

  0

  

  Yusuf Babatunde•150

  @owocodedPosted over 2 years ago

  @correlucas yes, it's updated u can check using your mobile phone to see the error.

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @owocoded Try to do these changes to avoid the error with the container scaling, instead of margins give it a max-width for the size:

  #bg {
      background-color: white;
      border-radius: 2%;
      max-width: 700px;
      /* margin-top: 4%; */
      /* margin-bottom: 2%; */
      /* margin-left: 36%; */
      /* margin-right: 36%; */
      max-width: 340px;
  }
  

  Marked as helpful

  0

  

  Yusuf Babatunde•150

  @owocodedPosted over 2 years ago

  @correlucas http://GitHub.com/owocoded/QR-code.git My git repository

  0

  

  Yusuf Babatunde•150

  @owocodedPosted over 2 years ago

  @correlucas Thanks so much, it fit in now.

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Yusuf Babatunde! 👋

  Congratulations on completing this challenge! 🎉

  For this challenge, the styling of the card both on mobile and desktop is the same. But, the problem is on mobile view, the card is not in the middle of the page. I would recommend following the @correlucas's recommendation by making the body element as the flex container of the card. This way, the card will always be in the middle of the page regardless of the user's screen size.

  I recommend using the modern CSS reset by Piccalilli every time you start a new project. This will help you get the base styling right.

  For the card element (<div id="bg">), there is no need to set width. The card only needs a max-width to prevent the card from filling the entire page horizontally. Also, there's no need to specify height: auto since by default the element will adapt based on the height of the children elements.

  I hope this helps! Happy coding! 😄

  0

  ---

  

  Yusuf Babatunde•150

  @owocodedPosted over 2 years ago

  @vanzasetia @correlucas after setting the body as flex the mobile view is scattered again, pls help out

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @owocoded

  What is the problem? At what screen size the issue is happening?

  I took a look at the site and I didn't notice any issue. So, could you explain the problem by answering the above questions? 🙂

  0

  

  Yusuf Babatunde•150

  @owocodedPosted over 2 years ago

  @vanzasetia Thanks so much, it has been rectify.

  1

  

  Yusuf Babatunde•150

  @owocodedPosted over 2 years ago

  @vanzasetia Thanks so much, it has been rectify.

  0