-1

I am having this trouble with my game in where the screen creates a small scroll bar and the page won't fit on one screen. When I try changing the height in my body and html tags it seems like nothing is happening and when I try overflow:hidden it just stops me from getting to my play again button and doesn't actually fit the game onto one single page.

Here is the game link https://jobaa11.github.io/connect-4-project-1/

This is my CSS for my body and main

body {
  margin: 0;
  height: 100vh;
  display: grid;
  justify-content: stretch;
  align-items: center;
  background-color: var(--blue);
}
main {
  display: grid;
  justify-content: center;
  margin: 0;
}

I've tried several different options, but that scrollbar has been very persistent. Any suggestions?

This is also my footer which holds my play-again button that keeps causing the scroll bar issue I believe.

footer {
  display: flex;
  justify-content: space-evenly;
  font-family: 'Press Start 2P', sans-serif;
  color: rgb(75, 57, 57);
}

footer>button {
  margin-top: 10px;
  outline-style: groove;
  background-color: #FEDF49;
  border-radius: 5%;
  font-family: 'Press Start 2P', sans-serif;
  font-size: small;
}

footer>button:hover {
  transform: scale(1.1);
  opacity: 80;
  color: red
}

#replay-again-btn {
  cursor: pointer;
}
jo A
  • 1
  • 1
  • 4
  • Try `overflow: hidden` or `overflow: visible`. Is this what you mean? – Paradox Sep 24 '22 at 21:49
  • Could you put "overflow: hidden;" into the body? – Skittlez McGuillicutty Sep 24 '22 at 21:50
  • Does this answer your question? [Hiding the scroll bar on an HTML page](https://stackoverflow.com/questions/3296644/hiding-the-scroll-bar-on-an-html-page) – Johna Sep 24 '22 at 22:25
  • Sorry I wasn't more clearer...I mentioned already trying "overscroll", but I actually meant overflow...the thing with that is it just hides the scroll bar. With that on, you can barely see the play again button and now wont be able to scroll down to it. I actually need something that will fit everything onto one page where theres no need to have to scroll at all – jo A Sep 25 '22 at 00:11
  • Then just reduce the size of something so that everything fits on the screen? – Johna Sep 25 '22 at 20:58

1 Answers1

1

add to your css :

body {
  margin: 0;
  height: 100vh;
  overflow:hidden;
  display: grid;
  justify-content: stretch;
  align-items: center;
  background-color: var(--blue);
}
Peleg Haham
  • 81
  • 5
  • I tried overflow and it doesn't do what I need it do in the sense that now with that on, if you have a smaller window screen you might not be back to see the play again button at all – jo A Sep 25 '22 at 00:13
  • You can place the play again button in the center of the screen. Using position: absolute; z-index:1; top:50vh; left:50vw; transform:translate(-50%,-50%) – Peleg Haham Sep 25 '22 at 06:52
  • This is almost the ideal solution. It would be perfect if it didn't cover the board. I am thinking that maybe having it adjacent to the board would be great – jo A Sep 25 '22 at 07:27