Help with TIC TAC TOE game needed

I’m currently finishing off my tic tac toe game. The AI still needs some work but I’m currently trying to figure out how to stop the board from shifting down when text with the winner appears above it. Here’s my project :slight_smile: https://codepen.io/gpiliponyte/full/zzXKLa/

Does anybody have any ideas? :slight_smile:

1 Like

Very pretty, good job. Functional, too.

As a suggestion, you can remove every <center> tag you have in your HTML and every text-align:center; from your CSS. Since you want everything centered, just give text-align:center; to the body. At that point, the only thing that won’t be centered will be the table, which you’ll be able to center using margin, like this:

.board > table {
  margin:0 auto;
}

As for your question, maybe you could just have the result at the bottom of the table, instead of having it at the top?

Thank you so much for all your advice!

It helped me out a lot even though in the end I decided to leave the text above the board because it wasn’t bothering me as much (especially when I added the ‘restart game’ button).

I have a few things I would like to ask you. Are tags considered bad practice? And

why

did the >table bit have to be specified in order for the board to be centered?

Thanks so much again :slight_smile:

They aren’t but the center tag specifically isn’t supported in HTML5

It wasn’t necessary, but it’s just good practice to reference elements as correctly as possible. In .board > table the > sign selects a direct child (or children) of the element .board; as an example, if you had a structure like this:

<div class="board">
  <table>
  </table>
  <div class="inner-board">
    <table>
    </table>
  </div>
</div>

without the > sign you would have selected the table inside inner-board as well.

If you just meant why you needed to target the table, it’s because margin: 0 auto; only works with elements that are tables or have a fixed width.

No problem!