title: Bootstrap card images disappear on tablets only
body: <p>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! </p>
  
  <p>
        </p>
  
  <pre><code>    &lt;!--Grid column--&gt;
      &lt;div class="col-lg-4 col-xs-12"&gt;
  
        &lt;!--Card--&gt;
        &lt;div class="card"&gt;
  
          &lt;!--Card image--&gt;
          &lt;div class="view overlay"&gt; 
            &lt;img src="img/work1.jpg" class="img-fluid" alt=""&gt;
            &lt;a href="http://www.eddiearkmunoz.com/" target="_blank"&gt; 
              &lt;div class="mask rgba-white-slight"&gt;&lt;/div&gt;                
            &lt;/a&gt; 
          &lt;/div&gt;
  
          &lt;!--Card content--&gt;
          &lt;div class="card-body text-center"&gt;
            &lt;!--Title--&gt;
            &lt;h4 class="card-title"&gt;Mu&amp;ntilde;oz Designs&lt;/h4&gt;
            &lt;!--Text--&gt;
            &lt;p class="card-text"&gt;&lt;b&gt;Languages:&lt;/b&gt; HTML, CSS, Bootstrap, JavaScript, PHP&lt;/p&gt;
            &lt;a href="http://www.eddiearkmunoz.com/" target="_blank" class="btn btn" style="background-color: #1C2331;"&gt;View&lt;/a&gt; 
          &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;!--/.Card--&gt; 
  
      &lt;/div&gt;
      &lt;!--Grid column--&gt;
  
      &lt;!--Grid column--&gt;
      &lt;div class="col-lg-4 col-xs-6"&gt;
  
        &lt;!--Card--&gt;
        &lt;div class="card"&gt;
  
          &lt;!--Card image--&gt;
          &lt;div class="view overlay"&gt; 
            &lt;img src="img/work2.jpg" class="img-fluid" alt=""&gt; 
            &lt;a href="http://www.ridewithamy.info/" target="_blank"&gt;                    
              &lt;div class="mask rgba-white-slight"&gt;&lt;/div&gt;                
            &lt;/a&gt; 
          &lt;/div&gt;
  
          &lt;!--Card content--&gt;
          &lt;div class="card-body text-center"&gt;
            &lt;!--Title--&gt;
            &lt;h4 class="card-title"&gt;Ride with Amy&lt;/h4&gt;
  
            &lt;!--Text--&gt;
            &lt;p class="card-text"&gt;&lt;b&gt;Languages:&lt;/b&gt; HTML, CSS, MDBootstrap, Javascript&lt;/p&gt; 
            &lt;a href="http://www.ridewithamy.info/" target="_blank" class="btn btn" style="background-color: #1C2331;"&gt;View&lt;/a&gt; 
          &lt;/div&gt; 
  
        &lt;/div&gt;
        &lt;!--/.Card--&gt; 
  
      &lt;/div&gt;
      &lt;!--Grid column--&gt;
  
      &lt;!--Grid column--&gt;
      &lt;div class="col-lg-4 col-xs-6"&gt;
  
        &lt;!--Card--&gt;
        &lt;div class="card"&gt;
  
          &lt;!--Card image--&gt;
          &lt;div class="view overlay"&gt; 
            &lt;img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="img-fluid" alt=""&gt; 
            &lt;a href="#"&gt;                    
              &lt;div class="mask rgba-white-slight"&gt;&lt;/div&gt;                
            &lt;/a&gt; 
          &lt;/div&gt;
  
          &lt;!--Card content--&gt;
          &lt;div class="card-body text-center"&gt;
            &lt;!--Title--&gt;
            &lt;h4 class="card-title"&gt;WIP&lt;/h4&gt;
            &lt;!--Text--&gt;
            &lt;p class="card-text"&gt; This WordPress website is being created for personal study. &lt;/p&gt; 
            &lt;a href="#" class="btn btn" style="background-color: #1C2331;"&gt;View&lt;/a&gt; 
          &lt;/div&gt; 
  
        &lt;/div&gt;
        &lt;!--/.Card--&gt; 
  
      &lt;/div&gt;
      &lt;!--Grid column--&gt;
  
    &lt;/div&gt;
    &lt;!--Grid row--&gt;
  </code></pre>