I got to a point on my CMS project where Ive started to get my CSS code mixed up with other classes and breaking anything new I try to add. So I felt like I needed some more organization in my code, so I'm working on a UI kit in HTML, CSS, and JavaScript with no third party libraries added. I really want to learn everything I can, so here's my start! I will keep updating this page throughout the time I'm working on it.
0329
changed the vh to dhv
100vh is calculated including the address bar and navigation controls even when they overlay the page. A height: 100vh element ends up taller than the visible screen, pushing content behind the browser chrome.
Dynamic viewport units solve this. dvh updates as the browser chrome appears and disappears. svh is the small viewport height — the worst case with chrome fully visible. lvh is the large viewport height — chrome fully hidden. For full-screen sections, replace 100vh with 100dvh.
https://modern-css.com/mobile-viewport-height-without-100vh-hack/