Design comparison
Solution retrospective
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
- @VickyAzolaPosted 7 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 apy
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 apx-4
and amarker:font-bold
for the numbers. And to move the text further away from the number, I added a<span>
inside the<li>
with the classesrelative
andleft-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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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