I was working on this project and while trying to make it fit on all screens using @media it kept leaving a white space below and on the right of the page on the phone screen and I'm not able to get rid of. I tried doing this to the body tag inside of the @media in the CSS
body{
padding: 0;
margin: 0;
overflow-y: hidden;
overflow-x: hidden;
}
and I also tried making everything really small just to make sure that it's not just something big that's going over the border of the page, but no it's not that either. if someone can help me by telling me how to remove the white space
I inspected and made everything fit but it still on the phone have the whites pace around
First check the contents of the all block level html element inside the body if any of the contents overflowing. You first make sure that all the contents are well fitting inside the block level elements with proper height and width then no need to set overflow hidden for body. Some times external framework or library css also causing some problems if you use any kind of libraries you will just cross check those as well. The proper fix for this issue would not be setting overflow hidden.
Can you reset the spacing of default browser styles?
*{
padding: 0;
margin: 0;
}