Submitted 5 months ago

QR code component

vardhanf•80

@vardhanf

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

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
@gfunk77Posted 5 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
1
vardhanf•80
@vardhanfPosted 5 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
1
gfunk77•1,200
@gfunk77Posted 5 months ago
@vardhanf I’m so glad it helped!
0

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