body is not covering full page-CodePudding

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 enter link description here

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

CodePudding user response：

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;
}

CodePudding user response：

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.

CodePudding user response：

height: 100%; Means the height of the full text.

Use height: 100vh; which means 100% of the height of the viewport.

With the width 100% does mean the width of the parent element which is in your case the document.