qr-code-component-main

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!!

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!