Skip to content
Submitted over 1 year ago

Responsive QR code using Flexbox and EM/REM

Benjamin Lincoln•20
@CuriousFullStacks
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

My only issue here is that I couldn't get the "M" in mentor to be a bit before the word "Scan" like in the preview. I'm not sure why.

Community feedback

  • Yasmine•700
    @Yasmine10Posted over 1 year ago

    Hi @CuriousFullStacks

    When you remove the width: 70% in your <p> element and add padding-inline: 2rem; , the text should look the same as the design.

    Hope this helps 😊

    Marked as helpful
    1
    Benjamin Lincoln•20
    @CuriousFullStacksPosted over 1 year ago

    @Yasmine10 Thank you! I never knew about this property.

    0
    Yasmine•700
    @Yasmine10Posted over 1 year ago

    @CuriousFullStacks There are also other ways to do the same like padding: 0 2rem; or padding-left: 2rem; padding-right: 2rem; Those do the exact same thing, I just prefer using padding-inline

    Marked as helpful
    1

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