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
- @gfunk77Posted 6 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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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