Design comparison
Solution retrospective
2nd attempt, what else can I improve on?
Community feedback
- @dazzlerabhi30800Posted about 2 years ago
Try changing the font size in smaller screens, put your container inside main tag and lastly use h2 instead of h4 or you can use span tag also.This will take care of the responsiveness and accessibility issues.
Marked as helpful0 - @correlucasPosted about 2 years ago
πΎHello Luis, congratulations for your new solution!
Here's some tips for you:
The card container has a different size, use
max-width: 340px
to keep the container with its original size and responsive when the mobile version gets active..container { max-width: 340px; margin: 0 auto; padding-top: 2.5em; padding-inline: 1rem; }
The only reason your component is not RESPONSIVE is due the
fixed width
youve set for the card, button and pricing section. To fix this behavior all you need to do is replace thewidth
withmax-width
. Note that the difference between these two properties is thatwidth
is fixed, example,width: 340px
is an container that doesn't get bigger or smaller than340px
butmax-width: 340px
have the maximum of340px
and can contract when the screen scales down and adjust its size.π I hope this helps you and happy coding!
Marked as helpful0
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