Responsive Recipe Page
Solution retrospective
Things I found difficult
- Mostly was the instructions on how to style the list in a way that a new line begins at the same spot as the first line.
Questions
- How do I write a list in which the characters start at the beginning of the same line in a way that the second line of the same paragraph doesn't go inward?
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@katrien-s
Answer to your question: don’t put all your li-content in a span. Just wrap a span around the words that need to be bold. All the rest of the text can just be inside the li: ´<li><span>Total: </span>Approximately 10minutes</li>´ If nothing needs to stand out, don’t use span. It is ok to have text inside an li-element. Also in the <ol>, there is no need to type the numbering yourself. It happens automatically.
This is a helpful article: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/
Marked as helpful - @Jamesolukanni
It's pretty simple as I also just completed the challenge. You can either make use of <span> or <p> or some other inline element after your <li> before you input your word so you can select the <p> or <span> using descendant selection in css and style it in such a way that the second line starts from exactly where the first line starts from. you can check my solution here https://jamesolukanni.github.io/recipiepage/. Go through my repo https://github.com/Jamesolukanni/recipiepage.git if you’d like to see how I did mine but that’s the explanation in a nutshell
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