QR code solution for desktop and mobile using HTML and CSS At-Rule

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @FaithNA!

  Your project looks great!

  I noticed that your card is not centered. Here's a very efficient way to place the card in the middle of the page:

  • Apply this to the body (in order to work properly, don't use position or margins):

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

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  Faith Akanga•70

  @FaithNAPosted 10 months ago

  @danielmrz-dev Thank you for leaving a review. It definitely helps. This is the CSS code I have for the div element:

  div{

  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  background: hsl(0, 0%, 100%);
  max-width: 350px;
  height: 500px;
  text-align: center;
  border-radius: 20px;
  

  }

  Do I need to remove the margins and max-width here?

  0

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  @FaithNA

  You can remove the margins, but you can leave the max-width

  Marked as helpful

  0

  

  Faith Akanga•70

  @FaithNAPosted 10 months ago

  @danielmrz-dev Well Received.

  1
• 

  P

  Lucas Werner•60

  @LucasW92Posted 10 months ago

  Hello!

  I've also had problems aligning the text.

  As @timodn said, remember to apply the correct font-size and font-weight.

  The problem seems to be in your margins, you can control the margin between the bold text and the other with margin-top, margin-bottom, or just margin: top right bottom left (clockwise).

  Also, you can set width and height for the h1, p.. that way you can create boxes that you can control.

  In your browser, hit F12 to open up the dev tools, the top left button should be a selector tool, use the selector tool to see the margins that are currently being applied.

  https://developer.chrome.com/docs/devtools/dom

  This should help you to see the margins.

  Marked as helpful

  0

  ---

  

  Faith Akanga•70

  @FaithNAPosted 10 months ago

  @LucasW92 I will try to adjust my margin and set the width and height for the text as you recommend. Thank you! So that will mean that I will have to create a sub-div for them. Thank you for your review.

  0
• 

  timodn•240

  @TimmyOGHPosted 10 months ago

  You should increase the bold text's font size. The standard ones are for normal text sizes only I guess.

  Marked as helpful

  0

  ---

  

  Faith Akanga•70

  @FaithNAPosted 10 months ago

  @timodn Ohh okay. Thank you.

  1