Why is my text being hidden and i am unable to scroll in html

May 3, 2022

I am currently unable to scroll through the page and some text is just hidden under the page. I know its some error related to my css code but currently I’m not able to figure out what is actually causing this.

The css code is here

@font-face {
  font-family: 'mainFont';
  src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}

html { overflow-y: scroll; overflow-x:hidden; }
body { position: absolute; }

.container {
  /* height: 90vh; */
  display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f8f8f8;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.main {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 5.6vw;
  color: #181818;
}

.subMain {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
  position: absolute;
}

.description {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 2vw;
  color: #181818;
  position: relative;
  left: 20.6%;
  bottom: 3%;
}

.typed-text {
  color: chartreuse;
}

.space {
  margin-top: 150px;
}

.container p span.typed-text {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
}

.cursor {
  animation: blinker 0.6s linear infinite;
  color: #181818; 
}

.cursor.typing {
  animation: none;
}

@keyframes blinker {
  50% { opacity: 0; }
}

h2, h1 {
  margin: 0;
  vertical-align: bottom;
}

/* div {
  vertical-align: bottom;
} */

and here is my main html code:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <link rel='stylesheet' href='style.css'>
    </head>
    <body class='container'>
        <div>
            <h1 class='main'>Hello 👋, I'm Saharsh</h1>
            <h1 class='subMain'>and am a <span class="typed-text"></span><span class='cursor'></span> </h1>

            <h1 class='subMain'>
                Test <br>
                Test <br>
                Test <br>
                Test <br>
                Test <br>
                Test <br>
                Test <br>
            </h1>
        </div>
        <script src='Scripts/TypeDeleteText.js'>
        </script>
    </body>
</html>

And the result is something like this:

Any help would be appreciated!

>Solution :

Maybe adding 2 breaks will resolve your issue. and scroll-y:scroll on your container

@font-face {
  font-family: 'mainFont';
  src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}

html { overflow-y: scroll; overflow-x:hidden; }
body { position: absolute; }

.container {
  /* height: 90vh; */
  display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f8f8f8;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y:scroll;
}

.main {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 5.6vw;
  color: #181818;
}

.subMain {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
  position: absolute;
}

.description {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 2vw;
  color: #181818;
  position: relative;
  left: 20.6%;
  bottom: 3%;
}

.typed-text {
  color: chartreuse;
}

.space {
  margin-top: 150px;
}

.container p span.typed-text {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
}

.cursor {
  animation: blinker 0.6s linear infinite;
  color: #181818; 
}

.cursor.typing {
  animation: none;
}

@keyframes blinker {
  50% { opacity: 0; }
}

h2, h1 {
  margin: 0;
  vertical-align: bottom;
}

/* div {
  vertical-align: bottom;
} */

<!DOCTYPE html>
<html lang='en'>
    <head>
        <link rel='stylesheet' href='style.css'>
    </head>
    <body class='container'>
        <div>
            <h1 class='main'>Hello 👋, I'm Saharsh</h1>
            <h1 class='subMain'>and am a <span class="typed-text"></span><span class='cursor'></span></h1>
  <br><br>
            <h1 class='subMain'>
                Test <br>
                Test <br>
                Test <br>
                Test <br>
                Test <br>
                Test <br>
                Test <br>
            </h1>
        
        </div>
        <script src='Scripts/TypeDeleteText.js'>
        </script>
    </body>
</html>