在移动模式下，主要的 CSS 不必要的空间

Question

这是网站在桌面模式下的样子：

现在处于移动模式：

您可以看到现在底部有额外的空间。我确保擦除所有地方的边距，但空间仍然存在。

相关css代码：

.grid-container{
  display: grid;
  grid-template-areas: 
  "header"
  "main"
  "footer";
  grid-template-columns: 1fr;
  grid-template-rows: 5rem 1fr 3rem;
  height: 100%;
}

.main {
  grid-area: main;
  background-image: url("res/background_min.jpg");
  overflow: hidden
}

/*Home Screen*/
.home{
  display: flex;
}
.menu-list{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
}

.menu-list a {
  padding: 0rem;
  flex: 0 1 50rem;
  margin: 1.5rem;
  height: 100%;
  width: 100%;
  display: flex;
  text-decoration: none;
  color: white;
}

.menu-list li
{
  display: flex;
  list-style-type: none;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10%;
}

.menu-list p {
  font-size: 2vw;
}

.section a {
  color: #ffffff;
  font-weight: bold;
  font-size: 2vw;
  text-decoration: none;
}

.about {
  background-image: linear-gradient(to right, cyan, magenta);
}

.contacts {
  background-image: linear-gradient(to right, fuchsia, turquoise);
}

.projects{
  background-image: linear-gradient(to right,  turquoise, fuchsia);

}
.question-box {
  background-image: linear-gradient(to right, magenta, aqua);
}

.home-main-image{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 45%;
}
.home-main-image img{
  
  max-width: 99%;
}

.fade-in {
  animation: fadeIn ease 2s;

}
.button{
  background-image: linear-gradient(to right, cyan, magenta);
  border: none;
  text-align: center;
  color: white;
  text-decoration: none;
  font-size: 1vw;
  padding: .5rem;
}

菜单列表是应该占据左侧大部分屏幕的垂直按钮列，home-main-image 是贴在右侧的巨大终端徽标。

请注意，真正的移动设备也会出现此问题。

编辑：为澄清起见，这是额外的空间：

编辑：添加反应 html：

App.js

function App() {
  const [lang, setLang] = useLanguage(); 
  const handleLanguageChange = () => {
    if (lang.lang === 'eng'){
      setLang('fr')
    } else {
      setLang('en')
    }
  }
  return (  
      <BrowserRouter>
        <div className="grid-container">
          <header className="header">
            <div className="brand">
              <Link to="/" >
                  Eduardo Breton
              </Link>
            </div>
            <div className="header-side">
              {lang.subtitle}
            </div>
            <div className="header-right">
              <button className="button" onClick={() => handleLanguageChange()}>{lang.traduction} </button>
            </div>
            <div>

            </div>
          </header>
          <main className="main">
            <div className="content">
              <Route path="/" exact={true} component={HomeScreen} />
              <Route path="/about" component={AboutScreen}/>
              <Route path="/contact" component={ContactScreen}/>
              <Route path="/project" component={ProjectScreen}/>
              <Route path="/question" component={QuestionScreen}/>
            </div>

          </main>
          <footer className="footer">
            &#169; 2020 Eduardo Breton
          </footer>
        </div>
      </BrowserRouter>
   
  );
}

HomeScreen.js：

const { Link } = require("react-router-dom");

function HomeScreen() {
    const [lang, setLang] = useLanguage(); 
    return <div className="home">
        <ul className="menu-list">
            <Link to="/about">
                <li className="fade-in section about" >
                    {lang.about}
                </li>
            </Link>
            
            <Link to="/contact">
                <li className="fade-in section about" >
                    {lang.contact}
                </li>
            </Link>
            <Link to="/project">
                <li className="fade-in section about" >
                    {lang.projects}
                </li>
            </Link>
            <Link to="/question">
                <li className="fade-in section about" >
                    {lang.question}
                </li>
            </Link>
        </ul>
        <div className="home-main-image fade-in">
            <img src={terminalImage} />
        </div>
    </div>
}

export default HomeScreen;

通过讨论检查的答案已解决问题，将 flex-direction 更改为 main 媒体屏幕上的列使我能够正确地将内容居中：

Answer 1

您需要做的第一件事是在头部添加移动视图的元描述。尤其是这些

 <meta content="width=device-width, initial-scale=1"   name="viewport" />
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

接下来，您需要通过添加媒体查询来使您的网站具有响应性，以便主页主图像和您的按钮具有响应性。您应该增加菜单按钮的大小并将它们设置为

 @media screen and (max-width:650px) {
 .menu-list li {
flex-direction:column;
}
}

这样您的按钮会更大，居中对齐，并在一个列中（这在移动设备上会更好看）。您还应该更改主图像的弯曲方向。另外，请尝试在移动视图中的按钮之间添加一些填充，这也应该有助于占用空间。