Responsive layout with HTML5 and CSS Flexbox

Hello, @Raphaelavazq!

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

• I noticed that your card is not centered.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

I hope you find this helpful!

Keep up the excellent work!

Hello @danielmrz-dev!

Thanks for your feedback 😊

What is happening is that I am having some troubles with the GitHub Pages because it seems that my CSS is not being applied... 😞

On my live-server, it is centered and looks good...

👉 have my CSS correctly linked in HTML and I couldn't find the problem yet. It is my first project using GitHub Pages, maybe you have some tip to sort it out?

Obrigada 😉 ( i m Portuguese ,by the way ... 🇵🇹)

💡and i centered with flexbox on the card and not on the body like this:

.qr-code-component {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 80px 20px;
  background-color: var(--light-gray);
  text-align: center;
}