Skip to content
Submitted about 1 year ago

Responsive layout with HTML5 and CSS Flexbox

Raphaelavazq•30
@Raphaelavazq
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

While working on this project, I significantly improved my understanding of responsive design, especially using Flexbox.

This project also reinforced the importance of mobile-first design and how to effectively use media queries to adapt the layout for larger screens.

What challenges did you encounter, and how did you overcome them?

was more difficult to understand media queries

What specific areas of your project would you like help with?

I had some issues with my GitHub Pages site because my CSS seems to not be applied i

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • P
    Daniel 🛸•44,760
    @danielmrz-dev

    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!

    Marked as helpful
  • Raphaelavazq•30
    @Raphaelavazq

    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;
}

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord