Frontend Mentor | QR code component coding challenge solution

Solution retrospective

What are you most proud of, and what would you do differently next time?

i was doing my first challenge on front-end using html,css . I wanted to make it responsive but it seems i didn't.

What challenges did you encounter, and how did you overcome them?

actually while adding image it overflown i tried position:relative to overcome it as the card width changes QR-code also changes

What specific areas of your project would you like help with?

I wanted to make it responsive but it seems i didn't.

Community feedback

gfunk77• 1,200

@gfunk77

Posted 3 months ago

Hi! Nice job on your card component. Here are a few tips that I hope will help.

You can eliminate the .container from the html and all .container styles from the css.
For the body, add justify-content: center Now for the card...
add your padding and border-radius to the .card
give your .card a width of like 90% and a max-width of like 375px or whatever the specs say it is on large screens.
add text-align: center to .card and remove it from the *
for the img just select it with img, you don't need .card img. Keep your styles you already have

At this point, you should have way less css and html and your card will look good and be as responsive as possible on all screens.

I hope this feedback was helpful for you.

Marked as helpful

@vardhanf

Posted 3 months ago

@gfunk77 thanks for ur feedback it was really helped i used them on blog & social media other 2 solutions which was i recently completed

gfunk77• 1,200

@gfunk77

Posted 3 months ago

@vardhanf I’m so glad it helped!

QR code component