html - CSS unecessary space in main when in mobile mode

Question

This is what the site is like when in desktop mode:

Now in mobile mode:

You can see that there is now extra space on the bottom. I make sure to erase margins everywhere but the space still remained there.

Pertinent css code:

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

Menu list is the vertical column of buttons that should occupy most of the screen on the left, and home-main-image is the giant terminal logo plastered on the right.

Note that the issue happens with a real mobile device too.

Edit: For clarification, this is the extra space:

Edit: added react 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;

Checked answer with the discussion has fixed the issue, changing flex-direction to column on a media screen on main has allowed me to center correctly the contents:

question from:https://stackoverflow.com/questions/65642653/css-unecessary-space-in-main-when-in-mobile-mode

Answer 1

the first thing you need to do is add a meta description for mobile view in the head. These in particular

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

Next you need to make your site responsive by adding media queries so that the home main image and your buttons become responsive. You should increase the size of the menu buttons and set them to

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

That way your buttons will be bigger, aligned in the center, AND in a column (this will look better on mobile). You should also change the flex direction of the main image. Also, try adding some padding between the buttons in mobile view, this should also help in taking up the space.