Bootstrap Modal Lightbox not responsive

I have been building a Bootstrap lightbox gallery using bootstrap 4 and the code from this Bootply https://www.bootply.com/KBspXYVjaX#

The only element to that code that has changed is instead of the images having the img-responsive class appended to them, it is instead using img-fluid along with far less images being used.

The lightbox gallery is working perfectly as expected however on mobile devices such as an iPhone, the gallery images are not scaling down to match the device screen size.

Any help will be greatly appreciated.

Code below:

<div class="container">
  <div id="img-container" class="row rocagallery">
    <a href="http://www.google.com/" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg" class="img-fluid sunsetlogoimg"></a>
    <div class="row">
      <div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 1"><img src="https://www.sanctuary-care.co.uk/sites/default/files/styles/article_image/public/quick_media/2017-06-12-seaside-celebrations.jpg?itok=IPhSIk8o&c=50144a4bc63c7307e37cc698b2e1038c" class="thumbnail img-fluid"></a></div>
      <div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 2"><img src="https://www.sanctuary-care.co.uk/sites/default/files/styles/article_image/public/quick_media/2017-06-12-seaside-celebrations.jpg?itok=IPhSIk8o&c=50144a4bc63c7307e37cc698b2e1038c" class="thumbnail img-fluid"></a></div>
    </div>
  </div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3 class="modal-title">Heading</h3>
  </div>
  <div class="modal-body">

  </div>
  <div class="modal-footer">
    <button id="prev-btn" class="btn btn-warning">Prev</button>
        <button id="next-btn" class="btn btn-primary">Next</button>
    <button class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
   </div>
  </div>
</div>

The JS is for the Next & Previous buttons so users can toggle between images which I am not experiencing issues with:

$('.thumbnail').click(function(){
    $('.modal-body').empty();
    var title = $(this).parent('a').attr("title");
    $('.modal-title').html(title);
    $($(this).parents('div').html()).appendTo('.modal-body');
    $('#myModal').modal({show:true});
});

$('#next-btn').click(function() {
 var link = $('.modal-body a');
  var number = parseInt(link.attr('title').match(/\S+$/));
  number++;
  if(number === 13) {
  number = 1;
  }
  $('.modal-body').html($('#img-container').find('a[title="Image ' + number + '"]').parent('div').html());
  $('.modal-title').text('Image ' + number);
});
$('#prev-btn').click(function() {
 var link = $('.modal-body a');
  var number = parseInt(link.attr('title').match(/\S+$/));
  number--;
  if(number === 0) {
  number = 12;
  }
  $('.modal-body').html($('#img-container').find('a[title="Image ' + number + '"]').parent('div').html());
  $('.modal-title').text('Image ' + number);
});