На сайте не корректируется положение элементов в зависимости от размера окна ⇐ CSS

[Anonymous]

Я написал код на Javascript, который берет данные об аккаунтах из json-файла и упорядочивает их на сайте по координатам x, y, но проблема в том, что при изменении размера окна браузера или на телефоне кабинеты остаются на прежнем месте и не меняют положение в зависимости от размера окна. Что делать?
Я пробовал с

Код: Выделить всё

window.addEventListener("resize", function() { console.log("Resize Event") });

динамически расставляет офисы, но событие просто игнорируется

Код: Выделить всё

let classrooms_ = void 0;

async function LoadCabinetsData() {
const dataShit = await fetch("./myAss.json");
const fuck = await dataShit.json();
return fuck["floor"];
}

async function drawCabinets(floor) {

if (classrooms_ === undefined) {
console.log("Loading Classroms");
classrooms_ = await LoadCabinetsData();
}

let classrooms = classrooms_[floor - 1];

var map = document.getElementById('map');
var tooltip = document.getElementById('tooltip');

console.log(classrooms)

if (classrooms !== undefined) {
classrooms.forEach(function(classroom) {
var room = document.createElement('div');
room.className = 'room';
room.style.left = classroom.location[0] + 'px';
room.style.top = classroom.location[1] + 'px';
room.style.backgroundColor = getColor(classroom.students, classroom.capacity);
room.innerText = classroom.cabinet;
if (classroom.type === 'Компьютерный') {
room.classList.add('computer-room');
}
if (classroom.type === 'Поточный') {
room.classList.add('stream-room');
}
room.addEventListener('mouseover', function() {
tooltip.innerHTML = `Кабинет №${classroom.cabinet}
Тип: ${classroom.type}
Вместимость: ${classroom.capacity}
Сейчас в кабинете: ${classroom.students} студентов
Группы: ${classroom.groups.join(', ')}`;
tooltip.style.left = (classroom.location[0] + 40) + 'px';
tooltip.style.top = (classroom.location[1] - 20) + 'px';
tooltip.style.display = 'block';
});
room.addEventListener('mouseout', function() {
tooltip.style.display = 'none';
});
map.appendChild(room);
});
}

function getColor(students, capacity) {
var percentage = (students / capacity) * 100;
if (percentage < 25) {
return 'green';
} else if (percentage < 50) {
return 'lightgreen';
} else if (percentage < 75) {
return 'yellow';
} else if (percentage < 90) {
return 'orange';
} else {
return 'red';
}
}

}

drawCabinets(1);

document.addEventListener('DOMContentLoaded', function() {
var buttons = document.querySelectorAll('.floor-btn');
buttons.forEach(function(button) {
button.addEventListener('click', function(event) {
var floorNumber = parseInt(this.getAttribute('data-floor'));
//console.log(floorNumber)
changeFloor(floorNumber);
});
});
changeFloor(1);
});

function changeFloor(floorNumber) {
var buttons = document.querySelectorAll('.floor-btn');
buttons.forEach(function(btn) {
btn.classList.remove('active'); // Убираем класс active у всех кнопок
});
var button = document.querySelector('.floor-btn[data-floor="' + floorNumber + '"]');
button.classList.add('active');  // Добавляем класс active к нажатой кнопке

while (map.firstChild) {
map.removeChild(map.lastChild);
}
drawCabinets(floorNumber);
}

Код: Выделить всё

.gridBox {
padding-top: 10px;
display: flex;
flex-direction: row;
height: 85vh;
}

.gridComponent {
height: 100%;
}

.gridComponent:hover {
transform: none;
}

.left-col .gridComponent {
height: 50%;
}

.left-col {
display: flex;
flex-direction: column;
width: 33.3%;
justify-content: space-between;
}

.right-col {
width: 66.6%;
padding-bottom: 0px;
}

.room {
max-width: 60px;
/* Изменяем ширину комнаты на 8% от ширины экрана при ширине экрана до 768px */
max-height: 60px;
/* Также изменяем высоту комнаты */
border: 2px solid black;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
border-radius: 5px;
color: black;
cursor: pointer;
/* Добавляем указатель при наведении */
}

@media screen and (max-width: 2000px) {
.room {
width: 5%;
height: 7%;
}
.stream-room {
width: 10%;
height: 14%;
}
}

@media screen and (max-width: 990px) {
.room {
width: 6%;
height: 8%;
}
.stream-room {
width: 12%;
height: 16%;
}
}

@media screen and (max-width: 768px) {
.room {
width: 8%;
height: 10%;
}
.stream-room {
width: 16%;
height: 20%;
}
}

.computer-room {
border-color: blue;
}

.stream-room {
max-width: 100px;
max-height: 140px;
}

.tooltip {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px;
display: none;
}

.floor-menu {
display: flex;
justify-content: center;
margin-bottom: 10px;
position: relative;
}

/* Определяем стили для всех кнопок */

.floor-btn {
background-color: #33333300;
color: rgba(255, 255, 255, 0.233);
font-size: x-large;
border: none;
padding: 10px 20px;
margin: 0 5px;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 6px;
/* добавляем округление углов */
}

/* Определяем стили для кнопок при наведении */

.floor-btn:hover {
background-color: #555;
}

/* Определяем дополнительные стили для активной кнопки */

.floor-btn.active {
background-color: rgba(65, 76, 233, 0.548);
/* изменяем цвет активной кнопки */
font-size: xx-large;
/* изменяем размер шрифта при активации */
color: white;
/* изменяем цвет текста */
}

Код: Выделить всё

Кабинетs















[url=../../index.html]
[img]https://oksei.ru/public/img/logo.png[/img]
[/url]
ГАПОУ "ОКЭИ" Кабинеты




Этаж 1
Этаж 2
Этаж 3
Этаж 4

Подробнее здесь: https://stackoverflow.com/questions/784 ... indow-size