There is a rule for a modal window, where its width is 560px , if you change this property in a larger direction, the size of the modal window will change but it will not be in the center, but will expand to the right. How to set a new window size and so that nothing breaks?

 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

I see the dependence of the rules:

 width: 560px; margin-left: -280px;

If for example change this:

 width: 700px; margin-left: -350px;

So for the desktop version, everything is ok, but when responding to the mobile version, everything is bad, it breaks down and moves to the left now and the content and part of the modal window disappear.

UPDATE

It turned out that the problem is reproduced in the Google Chrome browser, in other browsers there seems to be no problem ...

  • width modal px and margin-left: - (width modal / 2) px - soledar10
  • @ soledar10 That's just the point, does not help for the mobile version breaks. - Dmitry Nail
  • and to register in @media requests for the necessary values? - soledar10
  • @ soledar10 If I knew where to prescribe what, I wouldn’t have asked the question ... - Dmitry Nail

2 answers 2

Something like this

Feeddle

 @import url('https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css'); .modal { width: 700px; margin-left: -350px; } @media (max-width:767px) { .modal { top: 20px; left: 20px; right: 20px; width: auto; margin: 0; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <a href="#myModal" role="button" class="btn" data-toggle="modal">demo modal</a> <div id="myModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>Modal header</h3> </div> <div class="modal-body"> Modal body </div> <div class="modal-footer"> </div> </div>

  • These media rules are prescribed by default and so! It turned out the problem is reproduced in the Google Chrome browser ... And there is no problem in FF. - Dmitry Nail
  • Chrome Version 53.0.2785.143 m (64-bit) - everything works - soledar10
  • Nevertheless, my version 53.0.2785.143 m worked crookedly. - Dmitry Nail

In my case, the problem was solved by the following code.

 div.modal { width: 80%; margin-left: -40%; } @media (max-width:767px) { div.modal { width: 80%; margin: auto; } }