Skip to content
Submitted almost 2 years ago

Responsive Summary Order Component (HTML & CSS)

@Slaks97•180
@Slaks97
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I think I should have used Grid or exploit Flexbox more than I did but I feel intimidated at the thought of using those properties, yet I know they would simplify my code.

Also, I didn't know how to change the size of the .icon-img to match the template.

Could anyone give me a few pointers on how I could have coded this design more effectively using either Grid or Flexbox...or both?

Many thanks!

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055

    Regarding your query

    You can use whatever you like be it grid or flexbox.

    Here are the resources.

    Grid : link

    Flexbox : link

    I would say LEARN BY PRACTICE

    Marked as helpful
  • _nehal💎•6,710
    @NehalSahu8055

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    ➨ It look like your background image is not as per fem.

    • Add the following line of code in your body for proper background.
    background-image: url(https://nehalsahu8055.github.io/Responsive_Order_Summary/images/pattern-background-desktop.svg);
background-size:100%;
min-height:100vh;

    I hope you find this helpful.

    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