Change bootstrap 3 modal width maintaining responsiveness

Question

I just read on this article that you can change bootstrap modal width with this:

.modal .modal-dialog { width: 800px; }

But when I do this, I loose the default responsiveness of the modal.

How can I change the width but keep the responsiveness on mobile?

Xahed Kamal · Answer 1 · 2015-12-10T23:29:08.277

6

Just use max-width. It will become responsive-

.modal .modal-dialog { width: 800px; max-width:100%; }

Or, You can do it via media queries.

@media only screen and (max-width: 480px) {
    .modal .modal-dialog {
        position:relative;
        width:auto;
        margin: 10px;
    }
}

edited Dec 10 '15 at 23:29

answered Dec 10 '15 at 23:09

Xahed Kamal

This is almost perfect, but it's loosing the right margin. – Leandro Faria Dec 10 '15 at 23:12
Did you add any margin? – Xahed Kamal Dec 10 '15 at 23:16
Not really. Just set width and max-width. – Leandro Faria Dec 10 '15 at 23:21
1

I just figured out that max-width:95%; keeps like a right margin, but I'm not sure if it's the best solution. – Leandro Faria Dec 10 '15 at 23:22
Edited the answer. If you use media queries. It'll work perfectly. – Xahed Kamal Dec 10 '15 at 23:29

1 Answers1