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

recipe-page

hmdev2 80

@hmdev2

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?

I'm very proud of having been able to use Bootstrap easily and create the page.

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

I had some difficulties with media queries because I had to override some Bootstrap classes, but nothing I couldn't solve after thinking a bit more.

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

I had an issue with the spacing between the markers and the text of the ordered list; I couldn't align it perfectly.

Community feedback

Chirag 370

@chirag-bishnoi

Posted

you have given your li {text-indent:20px;} and this line is causing problem throughout the page. Replace that line with li {padding-left:1.2rem;} and it should solve your problem. Since in CSS properties that we define later takes the precedence, so in case if this doesn't work, just define li at last or use a class name instead of element.

Marked as helpful

1

hmdev2 80

@hmdev2

Posted

@chirag-bishnoi It worked!! Thank you very much for the tip, a simple change makes all the difference.

1

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