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

Responsive Recipe Page with CSS

@Ralph-arch4

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@justCaioDev

Posted

It's really great your solution! Congratulations!

  • About the change color of the numbers or symbol of an list. I used the pseudo-element "::marker" in the css. For example, "ol > li::marker { color: #f2f2f2; }". Using this pseudo-element you can style the numbers or symbols of an list item.
  • Now about the nutrition align. I used display flex, I placed each line inside a div, then I used display flex on that div and within the texts of each line I added "flex: 1;". This makes each element within the div occupy all available space, so they automatically align.

Sorry, my english is not perfect, but I hope I helped u.

0

@Ralph-arch4

Posted

Hello everyone , I'm trying to make practice with web coding , and I really like it but I encountered some problems by solving the challenge; 1.I cannot find a way to color differently the number of an ol list; 2. I cannot just think that in the nutrition section, the names and the numbers (ex. calories 277kcal, Carbs 0g) are not perfectly aligned, can someone help me; Furthermore I'd really appreciate some resources link to get web coding certifications;

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