Skip to content
Submitted 6 months ago

Recipe page using flexbox and tailwind css.

Lyle Patterson•60
@Squing0
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?

In general, getting more used to tailwind and I'd definitely try to be more aware of the mobile design here before attempting the desktop design.

What challenges did you encounter, and how did you overcome them?

The image here was the main problem both for the desktop and mobile design but by placing the image using absolute positing in the mobile design, I was able to allow it to scale down properly in comparison to using it's full width.

What specific areas of your project would you like help with?

Mainly getting the border lines to work for the table as these while these are definitely applied styles, they aren't visible and also having space between list numbers and list items.

Community feedback

  • Victoria Azola Silva•1,290
    @VickyAzolaPosted 6 months ago

    Hi there! 👋 Awesome job completing this challenge!.

    So for the <table>, the class border-separate is not allowing the border to show; if you remove it and add a py to the <th>, the space effect is still achieved.

    <table class="w-full text-left ml-5">
   <tr class="border-b">
      <th class="font-normal py-2">Calories</th>
      <td class="text-nutmeg font-bold">277kcal</d>
   </tr>
.......
</table>

    And for the list, I don't know if there is a better way, but this is how I did it: I removed the list-inside since the design shows it is outside, added a px-4 and a marker:font-bold for the numbers. And to move the text further away from the number, I added a <span> inside the <li> with the classes relative and left-2. I also removed the <br> since those aren't necessary.

    <ol class="list-decimal space-y-2 px-4 marker:font-bold">
   <li>
     <span class="relative left-2">
       <b>Beat the eggs:</b> In a bowl, beat the eggs with a pinch of salt and pepper
 until they are well mixed. You can add a tablespoon of water or milk for a fluffier texture.
     </span>
  </li>
.......

    Another thing is that in the design, the text color should be 'darkCharcoal'.

    Hope this Helps!

    Marked as helpful
    1

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