Frontend Mentor | recipe-page-main coding challenge solution

@krushnasinnarkar

Posted about 2 months ago

Hi @mohamedsaad2006,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve which I hope will be helpful:

Recipe Page Width:
- Your recipe page occupies the whole width of the screen. To fix this, you can wrap all your elements inside the <body> into a <main> element and give it a max-width of 600px (or whatever suits the design). This will ensure your content does not stretch across the entire width and remains centered.
```
<body>
  <main>
    Your content here
  </main>
</body>
```
```
main {
  max-width: 600px;
  margin: 0 auto; /* Center the main content */
}
```
Background Color:
- Remove the background color applied to the universal selector (*). This is unnecessary and is causing background color issues for list items (li).
```
* {
  background-color: hsl(0, 0%, 100%); /* Remove this line */
}
```

Wrapping Elements:

Wrap the .preparation and .total sections inside a container and then set the background. This will avoid any white space in between them.

<div class="container">
  <p class="preparation">
    Preparation content
  </p>
  <ul class="total">
    li items
  </ul>
</div>

.container {
  background-color: hsl(330, 100%, 98%);
}

Font Colors:
- Ensure you use the font colors specified in the design. This will make your solution more visually accurate.
List Styling:
- Your ordered (ol) and unordered (ul) list numbers and bullet points are not colored as specified in the design. You can use the ::marker pseudo-element to style them.
```
ol ::marker,
ul ::marker {
  color: #your-design-color;
}
```

I hope you find this helpful.

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

Happy coding!

recipe-page-main