Skip to content
Submitted 5 months ago

Recipe Page Solution

Soye Usoroh•40
@lazy-coffee
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'm happy the final solution came out really well and I was able to put appropriate spacing between each element

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

I encountered a challenge adding the spacing between the bullet points and the text after it . I also had a bit of trouble customizing the bullet points but Google helped me with that

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

I'd like some help or pointers about how to space bullet points and their text

Community feedback

  • Sushi•170
    @SushiOnToastPosted 5 months ago

    First of all, you’ve done a splendid job on this challenge - well done!

    Regarding your question, you were actually super close to achieving a gap between the bullet and the text content. What you did was give the li element margin-left: 20px - all you have to do is change margin-left to padding-left instead and you should be good to go.

    Another method is surrounding the text inside the li element with a <span> tag and giving it relative positioning .

    In my opinion the first method is easier but if you want to check out the second one this post on stack overflow might help: https://stackoverflow.com/questions/4373046/css-control-space-between-bullet-and-li

    Hope this helps :)

    0
    Soye Usoroh•40
    @lazy-coffeePosted 5 months ago

    @SushiOnToast Thank you very much!

    0

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