Odin Recipes Project


I just finished the Odin Recipes project. The only issue I’m encountering is that when I load the project on my phone, the links on the main page are not centered and are displayed on the right side of the website. Also, on each of the recipe pages, the black background of the header (h1 element) doesn’t go all the way to the right when I use my phone as well. Is it just an issue with my phone browser?

Here’s a link to the project:

Thanks in advance.

It is the fixed width set on the image.

You can change it to max-width: 400px and also add width: 100%

Or can use the min function to do both at the same time width: min(400px, 100%)

img {
  height: auto;
  border-radius: 5%;
  margin: 10px auto;
  display: block;
  width: min(400px, 100%);
1 Like

Awesome! That solved it, thanks! Do you know why the black background for the h1 element doesn’t cover the whole page? The black background covers most of the page but at the end towards the right it shows a small grey fragment . It only happens on my phone and on each of the recipe pages not the main page.

It is the default margin on the body. You can remove it in the stylesheet you have inside the /recipes folder.

But you really do not need two stylesheets. I would suggest you use the one in the root folder for all the styles on all the pages. Use ../styles.css for the CSS file link in the HTML files inside the /recipes folder. ../ move up to the parent folder.