Help needed - screen won't take up full height and width

Questions
1

I was watching a tutorial, and I tried to make something on my own, and when I tried to look at what I built on a vite server, the screen did not take up the full width and height. I don’t know what to do, can someone help me. If I need to add more details please tell me.

files to my code: GitHub - epik115/help

2

in style.css try changing

#renderCanvas {
    width: 100%;
    height: 100%;
}

to

#renderCanvas {
    display:block;
    border:0;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}
3

Your <div id="app"></div> should probably not be there

1 Like
4

On mobile browsers with a scrolling URL bar, it is preferable to use width and height instead of vw and vh. My minimal style is:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#renderCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
}
5

On mobile it would be 100dvh instead of 100vh, etc.

6

I deleted what you said and added what everyone else said and it still doesn’t work, what should I do?

7

Assuming you have a minimal Vite setup, you are only missing the import for your stylesheet.

You can add it in your index.html:

<link rel="stylesheet" href="/style.css" />

or in your main.js:

import './style.css';

Quick check: if your style.css is inside src/, then the path must match (e.g.: /src/style.css).