Skip to content
Submitted over 1 year ago

Responsive Summary Order Component (HTML & CSS)

@Slaks97•180
@Slaks97
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 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!

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    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
    0
  • _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    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
    0
    @Slaks97•180
    @Slaks97Posted over 1 year ago

    Thanks a lot @NehalSahu8055!

    I'll apply those and keep practicing! :)

    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