Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Straight-forward TailwindCSS + HTML Solution

@jrddp

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Small details such as the coloring of the list decorations were fun to catch and figure out.

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

I could not figure out a good way of fixing the spacing on the ordered list "Instructions" items. I wanted them to display with the same left-padding on each line (each overflow line of each list item should be to the right of the number, not below it). I wanted to do this without changing the semantic "li" and "ol" elements, but I could not find a solution.

Community feedback

@DevBytes-J

Posted

hi!!!....i had the same issue with the instruction part and i struggled with it for weeks without getting it only for me to ignore it for a while and come back to it a few days later and i was able to solve the issue and figure it out i dont know if its possible to explain the procedures here

0

@jrddp

Posted

@DevBytes-J I found another solution that helped me figure it out. Instead of using list-inside, you can add a left margin and then set each list item to be block elements. You can then add left padding to the block elements to give the offset you want. I also learned that Tailwind has a marker: selector for lists, which would have been a good improvement!

0

@DevBytes-J

Posted

@jrddp thats quite different from how i did mine buh it sounds cool too

0

Please log in to post a comment

Log in with GitHub
Discord logo

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