Chessboard doesn't resize with the css `media` event (chessboard.js)

Question

Chessboard doesn't resize with the css `media` event (chessboard.js)

100 views Asked by John Carter At 09 September 2024 at 06:51

I have created a multiplayer chess game with node.js and chessboard.js, and everything worked fine until I started testing on devices with smaller viewports than mine (I have 24"). The problem was that the board didn't fit on the screen! Well, to make the chess game available to both bigger and smaller viewports, I used media in CSS:

@media only screen and (max-width: 600px) {
    #my-board {
       width: 500px; // My board is 800px at the begining.
    }
}

Now here is the catch: The board doesn't resize. Or, rather, it does resize, but after the user has refreshed his/hers screen, which sucks because the game uses socket.io, and if he/she refreshes, the algorithm thinks that the user has disconnected (which leads to giving the user who is left the credit of winning).

Here is the smallest reproducible sample (you have to have chessboard.js library installed):

<html>

<head>



<!-- I am using bootstrap -->

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

</head>

<style>

#myBoard {
    width: 700px;
}



.main-container {
    text-align: center;
}

#container {
    height: 30%;
}

body {
    padding-left: 30px;
    padding-right: 30px;
}

#gameboard {
    text-align: center;
}

#chessboard-background {
    height: 95%;
    /* width:auto; */
}

#scroll-pgn {
    max-width: 700px;
}

#liveAlertPlaceholder {
    margin: 20px;
}

</style>
<body>
        <div id="chessboard-background" class="container overflow-auto text-center rounded-4 bg-dark text-white text-emphasis-dark position-absolute top-50 start-50 translate-middle">
            <div id="gameboard" class="text-center m-2 d-flex justify-content-center">
                <div class="body">
                <div id="myBoard"></div>
                
                </div>                
              </div>
            </div>
        </div>
</body>
</html>

Is this possible to fix? Or is it integrated with the chessboard.js library itself? Thank you for any answer.

EDIT

Full code: https://github.com/marsianjohncarter/Chess

LIVE (might load a bit)

https://chess-website-completed.onrender.com/

Original Q&A

There are 1 answers

**Ronnie Royston** · Answer 1 · 2024-03-01 00:39:48

Add the following to the <head> section of your page. You can do container queries too, btw.

<meta name="viewport" content="width=device-width, initial-scale=1">

This css works:

@media screen and (max-width: 1039px) {
  body > main{
    padding: 16px;
  }
}

@media screen and (min-width: 1040px) {
  body > main{
    padding: 36px;
  }
}

TechQA.

Chessboard doesn't resize with the css `media` event (chessboard.js)

There are 1 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in CHESSBOARD.JS

Popular Questions

Popular Tags

Trending Questions