@Neve
It was jank in the sense that turning it off, then turning it on again fixed it. I did not mean to leave that part out, my bad. It needed a reset to fix the issue
Dezi said:
@Maris
I turned it off with ctrl + shift + M and that fixed it, that was google chrome being jank
Awesome glad you got it. One of the best tips I can provide to be a good web dev is to learn the ins and outs of the developer tools you use. So if your preferred is Chrome get familiar with the tools. There are great extensions out there as well that help with specific languages like React etc.
A lot of the issues with CSS and even making API calls etc I find through dev tools. Once you’re familiar with them debugging becomes a lot easier.
@Maris
Yup great advice, I just learnt from this that I can drag the screen around on chrome dev, which caused it to be misaligned and me thinking that something was wrong with my CSS. Turning it off and on resets it.
Probably default browser styles. Chrome has 8px margin on the body. Soo set that to 0px. And you should be good to go
Setting height to 100% basically says: set the height of this to 100% of its parent element. body doesn’t have a parent element that is 100% of the screen height, so it’s just defaulting to 100% of whatever is filling it up. Remove the styles off html (not necessary) and set body {} to height: 100vh / width: 100vw. Alternatively, style the root div.
Also, you don’t need to set “px” when defining something as 0 (your margin/paddings); 0px is the same as 0em is the same as 0rem etc. Just 0 will do: margin: 0;
What kind of font is Old School Runescape?
btw dont use vw or vh, use dvh and dvw.
Those are dynamic view width and view height, and basically takes into account the height of phones toolbars and navigation. giving you the real height and width of the device.
How did you get that theme? It’s not the usual dark mode dev tools is it?
Thats because the devtools
Set box-sizing: border box for the body. Happened to me before and this always fixed it