search

sei-ec-remote / project-1-issues

Open new issues here
1 stars 2 forks source link

Game project issue #190

Closed spenserg92 closed 11 months ago

spenserg92 commented 11 months ago

What's the problem you're trying to solve?

Centering my game board and aligning items to center

Post any code you think might be relevant (one fenced block per file)

main {
    display: grid;
    grid-template-columns: 20vmin 20vmin 20vmin 20vmin 20vmin 20vmin;
    grid-template-rows: 10vmin 10vmin 10vmin 10vmin 10vmin 10vmin;
    justify-content: center;
}
    <main>
        <h3>Wins:</h3>
        <h3>Losses:</h3>
        <div class="board" id="box1">TILE</div>
        <div class="board" id="box2">TILE</div>
        <div class="board" id="box3">TILE</div>
        <div class="board" id="box4">TILE</div>
        <div class="board" id="box5">TILE</div>
        <div class="board" id="box6">TILE</div>
        <div class="board" id="box7">TILE</div>
        <div class="board" id="box8">TILE</div>
        <div class="board" id="box9">TILE</div>
        <div class="board" id="box10">TILE</div>
        <div class="board" id="box11">TILE</div>
        <div class="board" id="box12">TILE</div>
        <div class="board" id="box13">TILE</div>
        <div class="board" id="box14">TILE</div>
        <div class="board" id="box15">TILE</div>
        <div class="board" id="box16">TILE</div>
        <div class="board" id="box17">TILE</div>
        <div class="board" id="box18">TILE</div>

    </main>
    <div class="button">
        <button id="new-game">New Game</button>
    </div>

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

My tiles are not centering on the board

What is your best guess as to the source of the problem?

Css styling and proper placement of html

What things have you already tried to solve the problem?

various css styling options and different html formatting

Paste a link to your repository here

https://github.com/spenserg92/Memory-Game

nayaba commented 11 months ago

The first thing I notice is that you've got one container div main and you are using grid-template-columns on it as though it only contained the gameboard, but it also contains your wins/losses headers. Try moving them outisde of main. Further, I see we're using justify-content on main, however we're using grid. Justify-content won't have the exact same results as it would normally with flexbox - consider removing it from main for now.