Submitted 2 days ago

Recipe Page

RyotoX• 30

@RyotoX

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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

Justin• 300

@iamprincetj

Posted 2 days 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 helpful

Please log in to post a comment

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