Размер шахматной доски не изменяется с помощью события css `media` (chessboard.js) ⇐ CSS

[Anonymous]

Я создал многопользовательскую шахматную игру с помощью node.js и Chessboard.js, и все работало нормально, пока я не начал тестировать на устройствах с меньшими окнами просмотра, чем у меня (у меня 24 дюйма). Проблема заключалась в том, что доска этого не делала. поместится на экране! Чтобы сделать шахматную игру доступной как для больших, так и для меньших окон просмотра, я использовал media в CSS:

@media only screen и (максимальная ширина: 600 пикселей) { #моя-доска { ширина: 500 пикселей; // Моя доска имеет размер 800 пикселей в начале. } } Теперь вот в чем загвоздка: размер доски не изменяется. Или, скорее, он меняет размер, но после того, как пользователь обновил свой экран, что отстой, потому что игра использует Socket.io, и если он/она обновляется, алгоритм думает, что пользователь отключился (что приводит к выдаче пользователь, которому осталась заслуга выигрыша).

Вот наименьший воспроизводимый образец (у вас должна быть установлена ​​библиотека шахматной доски):

#myBoard { ширина: 700 пикселей; } .main-контейнер { выравнивание текста: по центру; } #контейнер { высота: 30%; } тело { отступ слева: 30 пикселей; отступ справа: 30 пикселей; } #игровая доска { выравнивание текста: по центру; } #chessboard-background { высота: 95%; /* ширина:авто; */ } #scroll-pgn { максимальная ширина: 700 пикселей; } #liveAlertPlaceholder { поле: 20 пикселей; } Можно ли это исправить? Или он интегрирован с самой библиотекой шахматной доски.js? Спасибо за любой ответ.

ИЗМЕНИТЬ

Полный код: https://github.com/marsianjohncarter/Chess

ПРЯМОЙ ЭФИР (может немного подгрузиться)

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