Here is the website: http://www.hotelsunlimited.tech/ Here is the code I think have problem. Problem is when on small screens, clicking on request a demo, fields are not clickable... I guess the problem is somewhere about z-index. I tried almost all posts/methods, but could not solve it.
<div id="requst_demo" class="modal fade in" role="dialog" style="display: block; padding-left: 0px;">
<div class="modal-dialog">
<!-- modal content start -->
<div class="modal-content">
<div class="modal-header bg-gray">
<button type="button" class="close" data-dismiss="modal">×</button>
<script type="text/javascript">var submitted=false;</script>
<h5 class="modal-title text-center" id="requestDemoDisplay"><!-- <i class="fa fa-lock fa-fw"> --> Request Demo</h5>
</div>
<div class="modal-body_bg col-md-12">
<div class="contact contact-us-one">
<div class="col-sm-12 col-xs-12 text-center mb20">
<h4 class="pb25 bb-solid-1 text-uppercase">
Help us to Reach You
<small class="text-lowercase">Please complete the form and we will get back to you.</small>
</h4>
</div>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){$('#inputInfo').hide();$('#requestDemoDisplay').hide();$('#successMessage').show();}"> </iframe>
<form name="contactForm" id="ss-form" action="https://docs.google.com/forms/d/17hNuB00okyMsEvvNrirQCZzZtwEEGmF1trFfBIwvKgI/formResponse" target="hidden_iframe" onsubmit="submitted=true" method="POST">
<div id="inputInfo">
<!-- fullname start -->
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<input type="text" name="entry.301789256" id="entry_301789256" class="input-md input-rounded form-control" placeholder="Fullname" maxlength="100" required="">
</div>
</div>
<!-- fullname end -->
<!-- email start -->
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<input type="email" name="entry.1752605527" id="entry_1752605527" class="input-md input-rounded form-control" placeholder="Work Email-ID" maxlength="100" required="">
</div>
</div>
<!-- email end -->
<!-- textarea start -->
<div class="col-sm-12">
<textarea class="form-control" name="entry.1630854875" id="entry_1630854875" placeholder="Any Question" rows="7" required=""></textarea>
</div>
<!-- textarea end -->
<!-- button start -->
<div class="col-sm-12 mt10 text-center">
<button type="submit" value="Submit" name="sendMessage" id="sendMessage" class="button button-md button-block button-grad-stellar">Send Message</button>
</div>
<!-- button end -->
</div> <!---end of inputInfo-->
<div id="sendingMessage" class="statusMessage sending-message">
<p>Sending your message. Please wait...</p>
</div>
<div id="successMessage" class="statusMessage success-message">
<p>Thanks for sending your message! We'll get back to you shortly.</p>
</div>
<div id="failureMessage" class="statusMessage failure-message">
<p>There was a problem sending your message. Please try again.</p>
</div>
<div id="incompleteMessage" class="statusMessage">
<p>Please complete all the fields in the form before sending.</p>
</div>
</form>
<div id="successMessage2" class="statusMessage success-message">
<p>Thanks for sending your message! We'll get back to you shortly.</p>
</div>
</div><!-- div contact end -->
</div><!-- col end -->
</div>
<!-- modal content end -->
</div>
</div>
I applied the following changes in inspector and they did the trick, let me know if you have an issue with them.
Add the following css
.modal-dialog, .modal-content{height: 100%;}
The above line fixes the appearance but not the text input issue. The following line will fix the input box not responding
#inputInfo .col-sm-12{clear: both;}
This is because the column that contains the textarea below is extending above its limits to cover the first two input fields.