search

itaditya / trick-or-treat-game

Play it for free here
https://trick-or-treat.netlify.com/
16 stars 17 forks source link

Incorrect height setting of window #43

Closed konsvasi closed 4 years ago

konsvasi commented 4 years ago

At the moment the width and height calculations doesn't take into consideration the padding that has been set in the game class. This lead to scrollbars appearing in the mobile version even though there is no more content when scrolling. In the desktop version the whole window will move up/down and left/right when the user moves the player.

As a solution I would calculate the height by removing the padding that has been set so there is no more scrollable space on the screen.

I'll work on it, if you have any suggestions feel free to comment

itaditya commented 4 years ago

just adding box-sizing: border-box fixed it in this commit https://github.com/itaditya/trick-or-treat-game/commit/9da27db7cde771842f71eb4ba8411ed28751bcfc

Also doing a calc with subtracting padding would not be very maintanable because if somebody changes the padding, somebody else has to remember to also update the calc in height. Though in this case, CSS custom properties can help.

Closing the issue but thanks for reporting.