Design comparison
Community feedback
- @Ojay16Posted 5 months ago
Hello there!
Congrats on completing the challenge! ā
Your project is looking fantastic!
I'd like to suggest a way to make it even better:
U could try using the
flex
property to make the content in your nutrition table align correctly to give the required outcome.Here's a highly efficient approach:
š Apply this CSS to the nutrition content of the table (You could try giving each gram content the same class to easily target them ):
.nutrition-list .gram { padding-right: 20px; color: hsl(14, 45%, 36%); font-weight: 700; } .nutrition-list li { flex: 1; text-align: left; }
The
flex: 1;
property allows the list items to grow and shrink as needed, which allows you to easily apply thealign-items: left property
, and thepadding-right
property on the.gram
Adjust the padding to align more to the left.Hope you find this helpful
Happy coding!
Marked as helpful0
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