twitter bootstrap modal is not coming properly on mobile screen - css

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>