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

Simple Recipe Page

Mnaqor66 90

@Mnaqor66

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@krushnasinnarkar

Posted

Hi @Mnaqor66,

Congratulations on successfully completing the challenge!

I have a suggestion regarding your code that I believe will be of great interest to you.

Your menu is occupying 100% width. This can be solved by giving a max-width to your menu. Add max-width: 650px; margin: 50px auto; to the .main class. The margin is given to add some space from the top and bottom and to center the menu:

.main {
    max-width: 650px;
    margin: 50px auto;
}

Change your image-omelette.jpeg's width to width: calc(100% - 5rem); to add some space around the image:

.image-omelette {
    width: calc(100% - 5rem);
}

Additionally, you didn't color the ul and ol points. You can do that by using the ::marker pseudo-element:

ul::marker,
ol::marker {
    color: your-desired-color;
}

I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!

Marked as helpful

0

Mnaqor66 90

@Mnaqor66

Posted

@krushnasinnarkar Thank you for a suggestion

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