Skip to content
Submitted about 2 years ago

order summary using grid and flex

Mohan Krishna•160
@Mohan823
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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!!!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    Hi, Mohan! 👋

    Congratulations on finishing this challenge! 👏

    The way I would make the card responsive is simply use max-width and overflow: hidden. The max-width is used to prevent filling the entire while still allowing it to shrink. For, the overflow: hidden is used to force the illustration image to obey the border-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 the button. In this case, set the type of them as type="button". It will prevent the button from behaving unexpectedly.

    That's it! I hope this helps!

    Marked as helpful
    0
    Mohan Krishna•160
    @Mohan823Posted about 2 years ago

    @vanzasetia Verymuch thank you for the valuable feedback. Today onwards when i m creating button i won't forget to mention it's type.😎

    0
    Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    @Mohan823 No problem! 👍

    0

Please log in to post a comment

Log in with GitHub

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