Skip to content
Submitted almost 3 years ago

QR Component Challenge using CSS Flexbox

Camille•10
@kmil31
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

I am wondering on how to adjust the size for mobile and desktop respectively. Was thinking of using media queries, but am quite uncertain on what exactly to implement for responsiveness. Any tips and suggestions?

Community feedback

  • ian•250
    @iannnopPosted almost 3 years ago

    For this design, you won't need to implement responsiveness because the card doesn't really scale too much with the size of the browser, but generally, you can make designs responsive by using rem, em, or percentage based units instead of pixel units in your css (only for things you want to change with respect to the size of the browser). I usually use media queries when the changes are more dramatic, like a completely different layout for desktop vs tablet/mobile.

    Marked as helpful
    2
  • Camille•10
    @kmil31Posted almost 3 years ago

    Thank you so much for the feedback! Will incorporate more percentage based units in the future! And thank you for the tip on media queries, I'll keep that in mind!

    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