My website is working perfectly on desktop and mobile devices, however when I view my website on a tablet/ipad my card images disappear. I can't seem to figure out why as I'm using Bootstrap 4/MDBootstrap and it is naturally responsive. I've never had this happen before. I have a feeling it's something simple I'm missing but can't find it. Also I don't have a custom CSS file. I'm using the CSS that MDBoostrap offers. I only made minor changes and those are made within the HTML file. Any help would be appreciated!
<!--Grid column-->
<div class="col-lg-4 col-xs-12">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img src="img/work1.jpg" class="img-fluid" alt="">
<a href="http://www.eddiearkmunoz.com/" target="_blank">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body text-center">
<!--Title-->
<h4 class="card-title">Muñoz Designs</h4>
<!--Text-->
<p class="card-text"><b>Languages:</b> HTML, CSS, Bootstrap, JavaScript, PHP</p>
<a href="http://www.eddiearkmunoz.com/" target="_blank" class="btn btn" style="background-color: #1C2331;">View</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-xs-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img src="img/work2.jpg" class="img-fluid" alt="">
<a href="http://www.ridewithamy.info/" target="_blank">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body text-center">
<!--Title-->
<h4 class="card-title">Ride with Amy</h4>
<!--Text-->
<p class="card-text"><b>Languages:</b> HTML, CSS, MDBootstrap, Javascript</p>
<a href="http://www.ridewithamy.info/" target="_blank" class="btn btn" style="background-color: #1C2331;">View</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-xs-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body text-center">
<!--Title-->
<h4 class="card-title">WIP</h4>
<!--Text-->
<p class="card-text"> This WordPress website is being created for personal study. </p>
<a href="#" class="btn btn" style="background-color: #1C2331;">View</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
