Skip to content
Submitted over 1 year ago

QR Code Component using Flexbox

JAVV•80
@daisukeeita
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello guys!

This is my solution to the challenge. I used FlexBox here to center the component. I also applied what they call BEM naming convention technique, but I'm unsure if what I'm doing is correct. I also used custom property naming for re-usability of the style.

What I can't seem to break here is to stay the footer on the bottom while maintaining the component to the center. I used the margin: auto to the footer, 'attribution' specifically', but the component itself can't stay in one place. Should I change the approach here?

Any feedback is welcome! 😁

Community feedback

  • Fer•3,970
    @fernandolapazPosted over 1 year ago

    Hi 👋, If I understand your question about the footer, maybe this can help you:

    @media screen and (min-height: 35rem) {
    .attribution {
        position: fixed;
        bottom: 0.5rem;
    }
}

    The min-height is just so it doesn't overlap the card in viewports with small height (such as mobile landscape orientation).

    I hope it’s useful 🙂

    Regards,

    Marked as helpful
    1
    JAVV•80
    @daisukeeitaPosted over 1 year ago

    @fernandolapaz

    Hello 👋! Yes, what you suggested helped me! Thank you so much! 😁

    0
    Fer•3,970
    @fernandolapazPosted over 1 year ago

    @daisukeeita

    I'm glad it helped you 🙂

    0

Please log in to post a comment

Log in with GitHub

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