twitter bootstrap modal is not coming properly on mobile screen

Question

I have implemented modal as a pop up. On desktop its coming properly but on mobile screen its coming at the one corner and not fully also. Code for modal

<div class="modal fade" id="loginmodal" role="dialog" style="display:none;position: fixed;top: 50%;left: 50%;margin-top: -15%;margin-left: -25%;margin-bottom: -50px;width:80%;height:80%;">
                    <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content" style="background-color: #2E5D2E;">


                            <div class="modal-body">
                                <h1 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;font-weight: 900;font-size: xx-large;">Pick Ur Desired Location</h1>
                                <h5 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;">We will get back to you promptly.</h5>

                                <form id="loginform" name="loginform" method="get" action="/query" class="form-horizontal">

                                    <div class="form-group">
                                        <div class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;" >
                                            <label for="location" style="margin-left: 24px;">Your Location</label>
                                            <div class="col-sm-10">
                                              <select class="selectpicker form-control" id="location" name="location"  style="width: 664%;" required="true">
                                                 <option value="jaipur"  disabled="disabled" selected="selected">Jaipur</option>
                                                  <option value="shimla">Shimla</option>
                                                  <option value="bangalore">Bangalore</option>
                                                                                                  </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-2 control-label" style="margin:auto; border-radius:0;color: #0E0E0E;">
                                            <label for="username">Email Id:</label>
                                            <div class="col-sm-10">
                                            <input  name="emailId" class="form-control" id="emailId"  tabindex="1"  type="email" required="true" style="width: 664%;"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-2 control-label" style="margin:auto; border-radius:0;color: #0E0E0E;">
                                            <label for="username" style="margin-left: 5px;">Phone No:</label>
                                            <div class="col-sm-10">
                                            <input type="text" name="phoneno" id="phoneno" class="form-control ip_text" tabindex="2" style="width: 664%;"  pattern="^([0-9]{10})?$" required="required"/>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-success btn-block"> Submit Your Interest</button>
                                </form>
                            </div>

                        </div>

                    </div>
                </div>

On mobile screen its looking like this

how Can I make it to come center of the screen with out disrupting its location on big screen like desktop. Can someone suggest me some idea to do it ?

Answer 1

The inline styles you're applying are causing alot of the issues (I removed any related to size-position) and you are putting your input and label inside col-sm-2 when you just want the label itself to use col-sm-2, not the input and label encased together inside of those columns.

<label for="location" class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;">Your Location</label>

You can use jQuery to keep your modal on the center of the page.

See working example.

$(function() {
  function reposition() {
    var modal = $(this),
      dialog = modal.find('.modal-dialog');
    modal.css('display', 'block');
    dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
  }

  $('.modal').on('show.bs.modal', reposition);

  $(window).on('resize', function() {
    $('.modal:visible').each(reposition);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#loginmodal">Launch demo modal</button>
<div class="modal fade" id="loginmodal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content" style="background-color: #2E5D2E;">
      <div class="modal-body">
        <h1 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;font-weight: 900;font-size: xx-large;">Pick Ur Desired Location</h1>

        <h5 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;">We will get back to you promptly.</h5>

        <form id="loginform" name="loginform" method="get" action="/query" class="form-horizontal">
          <div class="form-group">
            <label for="location" class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;">Your Location</label>
            <div class="col-sm-10">
              <select class="selectpicker form-control" id="location" name="location" required="true">
                <option value="jaipur" disabled="disabled" selected="selected">Jaipur</option>
                <option value="shimla">Shimla</option>
                <option value="bangalore">Bangalore</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="username" class="col-sm-2 control-label" style=" border-radius:0;color: #0E0E0E;">Email Id:</label>
            <div class="col-sm-10">
              <input name="emailId" class="form-control" id="emailId" tabindex="1" type="email" required="true" />
            </div>
          </div>
          <div class="form-group">
            <label for="username" class="col-sm-2 control-label" style=" border-radius:0;color: #0E0E0E;">Phone No:</label>
            <div class="col-sm-10">
              <input type="text" name="phoneno" id="phoneno" class="form-control ip_text" tabindex="2" pattern="^([0-9]{10})?$" required="required" />
            </div>
          </div>
          <button type="submit" class="btn btn-success btn-block">Submit Your Interest</button>
        </form>
      </div>
    </div>
  </div>
</div>