Есть правило для модального окна, где указана его ширина в 560px
, если поменять это свойство в большую сторону, то размер модального окна изменится но оно будет не по центру, а расширится вправо. Каким образом задать новый размер окна и так чтобы ничего не сломалось?
div.modal {
position: fixed;
top: 10%;
left: 50%;
z-index: 1050;
width: 560px;
margin-left: -280px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
outline: none;
}
UPDATE
Вижу зависимость правил:
width: 560px;
margin-left: -280px;
Если например поменять так:
width: 700px;
margin-left: -350px;
То для десктопной версии все ок, а вот при респонсиве до мобильной версии, все плохо, ломается и съезжает теперь влево и пропадает контент и часть модального окна.
UPDATE
Оказалось что проблема воспроизводится в браузере Google Chrome, в других браузерах вроде как нету проблемы...