Design comparison
Solution retrospective
I am really proud to myself the I am able to finish this challenge and overcomes the challenges
What challenges did you encounter, and how did you overcome them?The challenges that I encounter was to change the list element color and give them a spacing, I tried to modify it on my own until but I'm not able to get the design that I want. I overcome this challenge by searching in the google on how I can apply the design that like the sample image.
What specific areas of your project would you like help with?I am really glad if someone able to lent me there knowledge on how I am able to split the Nutrition other than by making it inline-block.
Community feedback
- @Glorit74Posted 7 months ago
There are some other solutions. I used the old fashioned table:
<table class="w-full text-charcoalDark"> <tbody class="divide-y-2 divide-grey"> /* class makes the lines between rows */ <tr> <td class="w-[50%] py-3 pl-8">Calories</td> <td class="text-primary font-bold">277kcal</td> </tr>
You could use flexbox, here I used your code with tailwind properties:
<section class="flex flex-col divide-y-2 divide-grey"> <p class="flex pl-8 py-3"> <span class="w-[50%]">Carbs</span> <span class="text-primary font-bold">0g</span> </p>
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