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
Or can use the
min function to do both at the same time
width: min(400px, 100%)
margin: 10px auto;
width: min(400px, 100%);
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
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
../ move up to the parent folder.