Как сделать адаптивным модальное окно в bootstrap?

Question

[Jacksnow]

Есть модальное окно, хотел сделать его адаптивным для мобильных устройств. Пытался сделать копию и запихать его в row col-xs-12, и перерисовать, не получается. Переписал classы. Как только в CSS задаю новые параметры width и height, в мобильных устройствах отказывается показываться. Походу в row его нельзя запихать. А как сделать?

Сделал, при размере экрана xs сделал другую(такую же по виду) кнопку, и с нее сделал вызов на новую форму.

Answer 1

[iBird Rose]

а не легче самому .modal-dialog в media задать width: 100%; и margin убрать?

Comments

[Jacksnow]

пока с media не сталкивался

[Jacksnow]

сейчас почитаю, тк пока не понимаю о чем ты

[iBird Rose]

Jacksnow:

@media (max-width: 991px) and (min-width: 0px) {
    .modal-dialog {width: 100%;
   margin: 0;
   margin-top: 100px;
}

[Jacksnow]

у меня не работает почему то, пробовал и на картинках, и так

[Jacksnow]

media (max-width: 991px) and (min-width: 0px) {
.popup {
width: 100%;
margin: 0;
margin-top: 100px;
display: block;
opacity: 0.98;
padding:5px 15px 15px;
position:fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display:none;
overflow:hidden;
border:1px solid #ccc;
background:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
z-index:100;
behavior: url(PIE.htc);
}
}