historydev

<div class='myBlock'>1</div>

.myBlock {

   width: 60px;
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: url('./myCircle.svg');
   background-size: 100% 100%;

}

Это вспомогательная функция редактора, название параметра который принимает функция, для упрощённого чтения кода.

<div class='circle'><div></div></div>

.circle {

   width: 60px;
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid #333;
   border-radius: 50%;

}

.circle div {

  width: 100%;
  height: 100%;
  background: green;
  border-radius: 50%;

}

Костыльно. Здесь я юзал flex-box.

тык

git add .

Да, думаю вполне, а в идеале установить правила для написания подобного - либо кратко, либо полностью

1. Занести все ссылки в переменные
2. Перестать играть с позиционированием и выровнять всё с помощью flex-box / margin

flex-box:

align-items: center;

@media only screen and (min-width: 320px) and (max-width: 768px)

тык

тык

function calculate() {
    var selectSquare      = document.getElementById('square').value*200;
    var selectCorner      = document.getElementById('corner').value*50;
    var selectPipes       = document.getElementById('pipes').value*150;
    var selectPerimeter   = document.getElementById('perimeter').value*50;
    var selectElectrolier = document.getElementById('electrolier').value*100;
    var selectSpotLight   = document.getElementById('spot_light').value*200;    
    var selectMaterial    = +document.querySelector('#material').value;
    var raschet = selectSquare + selectCorner + selectPerimeter + 
            selectPipes + selectElectrolier + selectSpotLight + selectMaterial;
    document.getElementById('summa').innerText = raschet +" р.";
    return true;
}

Разделите текст и картинки на два разных блока, так-же их в один главный блок и задайте ему следующие параметры:

.block {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

/* Ширину блокам картинок и текста задайте 50% */

Событие select распространяется только на input

Реакт запускает сервер для разработки, если соберёте билд командой npm run build, там будет статика, можно и в php юзать и к ноде подрубить. Внимательно прочитайте документацию.

Привязывайте модалку к id юзера, допустим data-id='34' и при записи комментария в бд, указывайте id нужного юзера, следом тяните этот комментарий по id

vds

::-webkit-scrollbar { width: 6px; height: 3px; background: #222; display: none;}
::-webkit-scrollbar-button { height: 6px; display: none;}
::-webkit-scrollbar-track {  background-color: #333;display: none;}
::-webkit-scrollbar-track-piece { background-color: #555;display: none;}
::-webkit-scrollbar-thumb { height: 50px; background-color: rgb(128, 255, 0); display: none;}
::-webkit-scrollbar-corner { background-color: #999;display: none;}
::-webkit-resizer { background-color: #666;display: none;}

При каждом подключении сокета создаёте таймер и скидываете только сокету, а не всем, тобиш не io.emit, а socket.emit (на сервере).

Скрытие элементов наоборот замедляет процесс т.к. они обрабатываются, но не отображаются, лучше в таком случае вырезать их или вставлять по мере необходимости.