Im trying to make some final touches to me recipe box, but am having some problems. First the page doesnt fit the screen like it should. If I view the page in the chrome dev tools, and change sizes everything looks fine. When I actually look at it on my phone its completely different. None of the modals fit the screen, you have to scroll to the right to get it to fit. Then if you type in the edit modal it just jumps up to the top of the screen. any help would be appreciated
Instead of applying margin-left: px to the div’s to bring it center, apply margin: 0 auto; ( If you need margin’s at top or bottom you can mention it too )
You should apply these changes in your media query and for mobile screens, full-width will look better with some breathing space at the left and right.
@Sujith3021 forgot about that. It unfortunately did not help anything. When you resize in code pen it looks great. But thats not the same view im seeing when I look on my phone. its still looks pushed to the right, and you have to scroll to get it to fit. Then for some reason only on my edit modal does it jump to the top when you try typing in ingredients
This is what i see in my mobile, it looks fine, and in dev tools for mobile view, i see you have given margin-left and margin-right to your h1 element, that makes the horizontal-bar visible, when i removed it, the horozontal-bar got removed.
Remove all the margins for the h1 for smaller screens, you can instead have text-align: center
Also, you should remove overflow:hidden from body{ }, it makes the vertical scroll-bar hidden in mobile view
