Submitted over 1 year ago

QR Component Responsive design

Bachar_elkarni• 160

@Diamo-B

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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-Code

Posted over 1 year 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

Bachar_elkarni• 160

@Diamo-B

Posted over 1 year 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

imad• 3,310

@imadbg01

Posted over 1 year 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

Bachar_elkarni• 160

@Diamo-B

Posted over 1 year ago

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

imad• 3,310

@imadbg01

Posted over 1 year ago

@Diamo-B Good luck bro

Please log in to post a comment

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