qr-code-component-main

Community feedback

• 

  Cintia•100

  @ciisiqPosted about 2 years ago

  Hi Federico Bordini, well done! keep going 🙌🏻

  body { display: flex; // for to use the flexbox flex-direction: column; //the default on flexbox will be in a row to put one under the other justify-content: center; //align the items on center on horizontal align-items: center; // align item in the vertical }

  You can use flexbox to center things and break down the elements, here is a link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ if you like learning to play, I like this one: https://flexboxfroggy.com/

  Have a nice code day!!

  Marked as helpful

  0
• 

  Amal Karim ✅•1,290

  @amalkarimPosted about 2 years ago

  Hi Federico. Congratulations on your first solution in Frontend Mentor!

  Regarding your questions, here is my personal view.

  Instead of using <br> as line breaks, to make text doesn't occupy the full width of its parent element, I personally will give the parent element the right amount of padding.

  To make image and text centered, you can use display: flex; or display: grid;. For example, in your code, instead of using this styling:

  main {
    text-align: center;
    margin-top: 10%;
    margin-left: 40%;
    padding: 1%;
    background-color: hsl(0, 0%, 100%);
    position: absolute;
    border-radius: 10%;
  }
  

  give the body additional styling, and remove some of main styling

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  main {
    text-align: center;
    background-color: hsl(0, 0%, 100%);
    border-radius: 10%;
  }
  

  That would likely improve the result.

  For other aspects of the design, feel free to check my solution.

  Hope this helps!

  Marked as helpful

  0