Design comparison
Solution retrospective
Maybe i couldve done differently if i know the proper semantics
What challenges did you encounter, and how did you overcome them?I had a hard time following the guide sizes and colors, so i just use color picker and use those instead and used my own size where i think its more closer to the provided images
What specific areas of your project would you like help with?I do not know how to properly move the bullets and numbers to the left side and also the last part of the nutrition, i cant follow the image, so i just set them by margins and it still broke and isnt fully aligned
Community feedback
- @iamprincetjPosted 2 months ago
Congrats on finishing the challenge. For the bullets, try giving the li padding-left. For responsiveness, try giving the main a width 90% with margin 0 auto for the mobile screen, then give it a max-width of maybe 600px so it also looks good in desktop screen. For the last section where you used footer, use div and use footer for that class="attribution " that was initially there.
For your div class="nutrition" try giving it's children DIVs display flex(which you did) plus justify content so it aligns as the design is. Ask questions on google or even GPT to help out with what you could do.
Good Luck!
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