body is not covering full page

Question

What can I do to make the body cover the whole page? In my CSS for body and html height and width 100%.

With the mobile version, the body is reduced in this way mobile

With the pc version, everything is fine with the width, but the height is not on the whole page

html {
    overflow: auto;
    height: 100%;
    width: 100%;
}
body {
    background-color: #1c1c1c;
    font-family: 'Press Start 2P', cursive;
}

Here is my full html and css

and if you can tell me what else can be corrected, I will be very grateful

use: `height: 100vw` Here is the question: https://stackoverflow.com/questions/25225682/difference-between-width100-and-width100vw — Jakub Štellner, Oct 11 '21 at 16:17

score 0 · Accepted Answer · answered Oct 11 '21 at 16:34

many of your elements have fixed width in px, which doesn't change in the media query. E.g. you have:

.container {
    width: 890px;
    ...
}

.menu__list {
  ...
  width: 700px;
}

You need to change them in your media query

@media screen and (max-width: 450px) { ... }

Personallly I'd keep only the container width in px for desktop and other things in percents, then in mobile versions I'd keepp them all in percents like

.container {
  width: 100%
}

Or sometimes

.container {
  width: 100%
  max-width: 320px;
}

score 0 · Answer 2 · answered Oct 11 '21 at 16:46

Basing on the first code you posted.

Modify your container class css (Desktop) since its inheriting from wrapper.

.container {
    margin: 0 auto;
}

Your current css ( remove width & padding )

.container {
    width: 890px;
    margin: 0 auto;
    padding: 0 20px;
}

Mobile is fine, its just inheriting the screen size of the emulator.

body is not covering full page

2 Answers2