Design comparison
Solution retrospective
I would Learn a few more things and implement it better next time. Im not that proud its not the best work as it took some time.
What challenges did you encounter, and how did you overcome them?Sizing, Spacing was the biggest challenge as I was given just an image of the final page, so it took quite a lot of back and forth iterations to get it somewhat right, which I also find not so accurate.
What specific areas of your project would you like help with?If you can see my Nutrition section's table and the original page's Nutrition section's table, you will notice the details is off. I'm unable to explain exactly. So, if anyone notices the issue please check the code Ive done it for and please guide me to fix the issue.
Community feedback
- @frost3dWavePosted 21 days ago
I can see few on that part.. hope it helps!
- All the nutritional value are left aligned where as in your solution they are right aligned.
- And the font weight for the values is also greater than what you have currently..
Marked as helpful0@tejasnegiPosted 21 days ago@frost3dWave If possible, Can you please help me by telling me how to fix it? It would be a great help.
0@frost3dWavePosted 21 days ago@tejasnegi I am not really sure on how to guide you without directly giving the answer, but you can select specifically those in your css [hopefully with a class] rather than chaining multiple descending operators, & text align them to where you wish them to be. And experiment with font weights provided in the style guide. I am sure that should do it.
Btw, you shouldn't have span tags everywhere in your html like you have now, you have
pand other such things to declare you para's not spans like you have now.Span should only be used like
strongoremlike those, in order to select a specific word / multiple words inside your para that you want to style differently or make it bold or italic without giving it any extra meanings. I would recommend you to check span tag reference on MDN.Marked as helpful0@tejasnegiPosted 21 days ago@frost3dWave Thank you so much I will surely try to solve the alignment using your method. As per the use of span, I had to change the color of the unorder list's bullet and the order list's order. So to do that I made spans around the text inside the li so when I change the color of the list it will change the entire text with the list's bullet and order, and then change the color of the span to its desired text color. I might be wrong in this method so I will definitely check out if there is a correct way to change the color of the lists, but this is how my thought process went when I was designing them. Thank you so much for pointing out though I will definitely check the reference and learn more specific use case of all of them. :)
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