3-column preview card component

Solution retrospective
This was easy but I still have issues with the design,it breaks whenever I check out the design on desktop mode on chrome on my mobile phone.Can someone please help me out with this issue...!?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @correlucas
👾Hello Finney, congratulations for your new solution!
Here's my tips for you about the card responsiveness and how to improve it:
Replace
width: 850px;
withmax-width: 850px;
to make it responsive:main { display: flex; margin: 0 auto; justify-content: center; min-height: 100vh; align-items: center; max-width: 850px; flex-direction: row; border-radius: 10px; overflow: hidden; }
Note that the difference between these two properties is that
width
is fixed, example,width: 850px
is an container that doesn't get bigger or smaller than850px
butmax-width: 850px
have the maximum of850px
and can contract when the screen scales down and adjust its size.👋 I hope this helps you and happy coding!
Marked as helpful
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