order summary using grid and flex

Solution retrospective
I have in trouble when I m creating my mobile layout. because the container can't shrink itself. But after a cup of tea, I simply close my windows means laptop, and starts thinking. Suddenly a spark came to my mind😎 Then come with solution the container isn,t overflowing itself due to that its not shrink. then i add "overflow: hidden;" to container. The problem is solved.🥰
But if you have any alternative easier than this! ALWAYS WELCOME!!!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @vanzasetia
Hi, Mohan! 👋
Congratulations on finishing this challenge! 👏
The way I would make the card responsive is simply use
max-width
andoverflow: hidden
. Themax-width
is used to prevent filling the entire while still allowing it to shrink. For, theoverflow: hidden
is used to force the illustration image to obey theborder-radius
of the parent element.For the CSS reset, I recommend using the "Modern CSS Reset" by Andy Bell. His CSS reset is good for modern browsers and accessibility.
Also, I recommend using the universal selector (
*
) rather than selecting and listing all HTML elements.One more suggestion is to always specify the
type
of thebutton
. In this case, set the type of them astype="button"
. It will prevent the button from behaving unexpectedly.That's it! I hope this helps!
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