Skip to content
Submitted 5 months ago

Recipe-Page

Daniel king•240
@thedanielking
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I decided to take a step back in my field and learn responsiveness and designing on my own without help.

What challenges did you encounter, and how did you overcome them?

I learnt about the "::marker" selector to change the bullet color of a list style type.

What specific areas of your project would you like help with?

I would love help in centering the container with margin-top and bottom set.

Community feedback

  • Dylan de Bruijn•3,230
    @DylandeBruijnPosted 5 months ago

    Hiya @thedanielking,

    Good job on this solution, it looks great!

    I'm happy to give you some friendly constructive feedback:

    • To give the container some spacing I would add some top and bottom padding to the body element. Or update your margin on the container like so margin: 4rem auto;

    • I suggest removing width: 100%, display: grid and place-content: center from the container. The container is already a block element so it takes up the full width. And because the container doesn't have any extra width or height the children don't get centered at the moment.

    • You could try recreating your nutrition table using the table, th and td elements.

    I hope you find my feedback helpful, as always I would appreciate it if you could mark my comment as helpful when it was!

    Let me know if you have more questions and I'll try to answer them.

    Marked as helpful
    0
    Daniel king•240
    @thedanielkingPosted 5 months ago

    hi@DylandeBruijn thanks for the feedback I had a problem using the "table", "th" and "td" attributes. I will try the fix. Thanks so much.

    1
    Daniel king•240
    @thedanielkingPosted 5 months ago

    hi@DylandeBruijn thanks for the feedback I had a problem using the "table", "th" and "td" attributes. I will try the fix. Thanks so much.

    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