Bootstrap 4 Modal Width Issue on Phone

Hi All

I have spent quite a bit of time on this and can’t find the answer.

I have even stripped the code right back to just the sample code off the Bootstrap websites, below.

I am using the Bootstrap 4 Modal for my terms and conditions and also for a YouTube video… it all works fine except on my mobile… I am testing on a Samsung s6… the width of the Modal is too wide and you have to scroll back and forth to see the content.

Is there any way to fix this so that the Modal is responsive and shrinks to the width of any device, including my phone?

Thanks for any help.

mrmbarnes

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Seems to work ok for me.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style></style>
</head>

<body>
<div class="container"> 
  <!-- Large modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
  <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <p>This is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content this is the modal content </p>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

I just made sure it was inside a container class as usual with bootstrap.

Does the above work for you?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.