Expanding the .pagewarp | calc in the .page-warp ignores Footer | height: calc(100vh - 10px);

[BoQsc]

https://github.com/vaido-world/Public-Domain-Web-Design/blob/main/index.css#L81

2021-09-09.14-26-08.mp4

[BoQsc]

One way to resolve this is add the max-height @media rule

@media (max-width: 600px), (max-height: 400px) {

Public-Domain-Web-Design/index.css

Line 92 in 7e2cc9f

@media (max-width: 600px) {

https://github.com/vaido-world/Public-Domain-Web-Design/blob/main/index.css#L92

[BoQsc]

the gird is .page-wrap, height of the grid is set by calc. height is equal to viewport and not the content, therefore the content is overflowing.
The gird is of the size of viewport and not the size of the content.