Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Summary Order Component (HTML & CSS)

@Slaks97 180

@Slaks97

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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,730

@NehalSahu8055

Posted

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,730

@NehalSahu8055

Posted

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

@Slaks97

Posted

Thanks a lot @NehalSahu8055!

I'll apply those and keep practicing! :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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