Skip to content
Submitted about 2 years ago

QR Component Responsive design

Bachar_elkarni•160
@Diamo-B
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 really found it quite difficult to switch from a working completed mobile design to a desktop one; the card container wasn't taking the width of the content even when I removed all the margins and turned all the content into 'inline-block' display just to make them take their exact width. I will really appreciate any help and just forgive me if what I said seemed boring to you. I am a real beginner at CSS but I have the desire to learn. Thank you again for your time :D

Community feedback

  • Eduardo•200
    @EDDuardOo-CodePosted about 2 years ago

    Congratulations for completing the challenge, well done

    You did a great job, , something that you can do ,it is to use rem units, and have a mobile approach first,(or to work in the general aspects of things like backgrounds ,text and images) also if you want to work a little bit more with css the youtube channel of Kevin Powell it is a great resource,

    Keep the good work

    Marked as helpful
    2
    Bachar_elkarni•160
    @Diamo-BPosted about 2 years ago

    @EDDuardOo-Code Thank you so much man, I am already watching Kevin Powell's videos from time to time, and you gave me the motivation I need, I am really grateful for that :D

    1
  • imad•3,330
    @imadvvPosted about 2 years ago

    Greeting Bachar_elkarni!! Congratulations for completing your challenge!, 👏👏👏 well done.

    you actually did great job using flex, the only thing that need is a width on the card, to fix it just add max-width: 21rem; to the card or something similar, you can experiment with numbers and pick what works well for you. 1rem = 16px

    but overall great attempt, Happy Codding, and keep up the good work

    Marked as helpful
    2
    Bachar_elkarni•160
    @Diamo-BPosted about 2 years ago

    @imadbg01 I'm gonna make it pixel-perfect this time. thank you so much man

    1
    imad•3,330
    @imadvvPosted about 2 years ago

    @Diamo-B Good luck bro

    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