1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Images in Cards disappear on tablets only?

dec23rd1986 free asked 6 years ago

Hi there, My website is live and is great, however when I view my website on a table/ipad the card images do not show up at all. I\'m confused as to why this is because they show up on desktop and mobile.Here is my code:     <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-lg-4 col-sm-12"> <!--Card--> <div class="card"> <!--Card image--> <div class="view overlay"> <img src="img/work1.jpg" class="img-fluid" alt="Responsive image"> <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&ntilde;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-sm-6"> <!--Card--> <div class="card"> <!--Card image--> <div class="view overlay"> <img src="img/work2.jpg" class="img-fluid" alt="Responsive image"> <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-sm-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="Responsive image"> <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>

Ollie Vincent pro answered 6 years ago

Hi, I believe you - I suggest you host a image externally and link it e.g. Google drive. My issue is I cannot replicate the issue on any IPad I have access to. What iPad are you using and version of ios? Is it possible that your browser is caching the cards? Thanks    

Sue Ridler pro commented 6 years ago

I have found that an image inside a 'card' doesn't display on an ipad or iphone, yet if you drag the same image outside the card it does appear. Hence there must be a bug in the card. I'd be grateful of a fix:)

Mikołaj Smoleński staff commented 6 years ago

Hi RestWish. Is there a chance to update Your iPad software (mainly Your browser)? There are no media queries for card images, which hide images only for tablets view. Maybe You have installed a browser plugin which blocks images for some reason? Regards

Mikołaj Smoleński staff commented 6 years ago

Also if You have an image outside the card, does it appear correctly?

Sue Ridler pro commented 6 years ago

This also happens on iphone too that Ive been testing on. I am concerned that anyone using an iphone/ipad will not be able to see images. (I have submitted a separate question under RestWish with code for you to look at).

Mikołaj Smoleński staff commented 6 years ago

I can see that my friend have solved Your problem. If there's anything more to fix, please write a reply. Regards

dec23rd1986 free answered 6 years ago

Hi Ollie,   On all of my test software's; google chrome, viewport resizer they all show the images on tablet view but for whatever reason, on my ipad the images are not populating. Is there any way I can post an image here to show you?  

Ollie Vincent pro answered 6 years ago

Sounds like you have a media query for tablets only - could you share you link so I can see the CSS?

dec23rd1986 free commented 6 years ago

Hi Ollie, Here is my website link- http://andreasanchez.co/ I do not have a personalized CCS file. I only had minor CSS changes so I put them within the HTML doc. So if there is a media query it is somewhere placed in the CSS docs provided via bootstrap. The CSS docs I used came with the MDBootstrap zip:

dec23rd1986 free commented 6 years ago

They are listed, in the page source of my website. I tried adding them here but it wouldn't let me .

Ollie Vincent pro commented 6 years ago

Hi, I cant seem to reproduce your problem. I tried on my phone - works fine, Samsung Tab - still works fine. I even tried IPad's on browser stack and I could still see them. Is it not your device blocking them for some reason?
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
dec23rd1986
10Support score
1Questions 1Answers 0Snippets