Skip to content
Submitted 3 months ago

Responsive QR Code Component Using Flexbox

Jessica•70
@JesNetWD
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?

I think i nailed the vertical alignment if my main element which helps for a more responsive design across variou screen sizes.

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

In trying to properly vertically align my main element, i had a bit of a setback as i used different ways to try and properly center it such as position or margin-auto but flexbox worked the best.

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

I would like to know how to fix something at the bottom of a page. My .attribution element was fixed at the bottom of the screen using fixed position but for a vey small screen it could overlap with the other elements. I would like to know how to fix it to the bottom of the page like a page number or a footnote.

Code

Please log in to post a comment

Log in

Community feedback

  • Paul•290
    @devPauloski

    Well done. Your solution has semantic HTML included, and it is well-structured, but the responsiveness needs some fixing. I would recommend you do the following:

    • On the main HTML element, replace the 'width' property with 'max-width'. Remove the height set on it, you don't need that, let the content flow do its thing. Reduce the bottom padding to 20px. Set margin of 16px on the main to create some space on the edge of the layout for mobile screen.
    • Remove the padding set on the section HTML element.
    • On the footer HTML, remove every set CSS property, including the "position: fixed", and add a margin of 16px to have side alignment with the main on the mobile screen. Good Job!
    Marked as helpful
  • web-dev-pasta•790
    @web-dev-pasta

    Great job!, for your question you can use a property called white-space so in your code you can use it like this :

    .attribution {
  white-space: nowrap;
}

    I hope that helped!, Happy Coding!!🌹

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