Skip to content
Submitted about 1 year ago

recipe-page

EMMANUEL DAMILOLA•170
@DAEM007
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • I am glad I got to work with vanilla css again.
What challenges did you encounter, and how did you overcome them?
  • Making the design up to par
What specific areas of your project would you like help with?
  • Training my eye to get a pixel perfect solution for designs.

Please log in to post a comment

Log in with GitHub

Community feedback

  • Daniel Capa•270
    @Daniel-C04

    Great solution. But at the bottom to position the second column of the table, you can try:

    .omelette-nutrition .nutrition-table-value { display: flex; margin-top: 1rem; gap: 0.5rem; }

    .nutrition-table-value .nutrient { margin-left: 2rem; margin-right: 17rem; width: 15px; } Instead of giving him margin one by one.

  • robinsonexe•80
    @robinsonexe

    Great solution overall but I noticed the second column of the table at the bottom of the solution isn't spaced correctly, I could not view the code from the repository to give an accurate solution but you can always try using a text align or maybe a margin to help position it properly.

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