Card Image not showing in ipad or iphone

Topic: Card Image not showing in ipad or iphone

Sue Ridler pro asked 6 years ago

There seems to be an issue:

Copied elegant card - duplicate - move image out of second card and it works compared to first.

Please can you fix issue?

Thanks :)

<div class="container pt-sm-85 pt-xs-60" data-pg-name="Page Container">
</div>

<div class="card">

<div class="view overlay">
<img class="card-img-top" src="https://mdbcdn.b-cdn.net/img/Photos/Others/food.jpg" alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>

<a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>

<div class="card-body">

<h4 class="card-title">Card title</h4>
<hr>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>

<div class="rounded-bottom mdb-color lighten-3 text-center pt-3">
<ul class="list-unstyled list-inline font-small">
<li class="list-inline-item pr-2 white-text">
<i class="fa fa-clock-o pr-1"></i>05/10/2015
</li>
<li class="list-inline-item pr-2">
<a href="#" class="white-text"><i class="fa fa-comments-o pr-1"></i>12</a>
</li>
<li class="list-inline-item pr-2">
<a href="#" class="white-text"><i class="fa fa-facebook pr-1"> </i>21</a>
</li>
<li class="list-inline-item">
<a href="#" class="white-text"><i class="fa fa-twitter pr-1"> </i>5</a>
</li>
</ul>
</div>
</div>
<hr />
<div class="view overlay">
<img class="card-img-top" src="https://mdbcdn.b-cdn.net/img/Photos/Others/food.jpg" alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card">


<a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>

<div class="card-body">

<h4 class="card-title">Card title</h4>
<hr>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>

<div class="rounded-bottom mdb-color lighten-3 text-center pt-3">
<ul class="list-unstyled list-inline font-small">
<li class="list-inline-item pr-2 white-text">
<i class="fa fa-clock-o pr-1"></i>05/10/2015
</li>
<li class="list-inline-item pr-2">
<a href="#" class="white-text"><i class="fa fa-comments-o pr-1"></i>12</a>
</li>
<li class="list-inline-item pr-2">
<a href="#" class="white-text"><i class="fa fa-facebook pr-1"> </i>21</a>
</li>
<li class="list-inline-item">
<a href="#" class="white-text"><i class="fa fa-twitter pr-1"> </i>5</a>
</li>
</ul>
</div>
</div>

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

Hi, I changed a little your code, please tell me if you still have problem with that: <div class="container pt-sm-85 pt-xs-60" data-pg-name="Page Container"> </div>  <div class="card">  <div class="view overlay"> <img class="card-img-top" src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap.jpg" alt="Card image cap"> <a> <div class="mask rgba-white-slight"></div> </a> </div>  <a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>  <div class="card-body">  <h4 class="card-title">Card title</h4> <hr>  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p> </div>  <div class="rounded-bottom mdb-color lighten-3 text-center pt-3"> <ul class="list-unstyled list-inline font-small"> <li class="list-inline-item pr-2 white-text"> <i class="fa fa-clock-o pr-1"></i>05/10/2015 </li> <li class="list-inline-item pr-2"> <a href="#" class="white-text"><i class="fa fa-comments-o pr-1"></i>12</a> </li> <li class="list-inline-item pr-2"> <a href="#" class="white-text"><i class="fa fa-facebook pr-1"> </i>21</a> </li> <li class="list-inline-item"> <a href="#" class="white-text"><i class="fa fa-twitter pr-1"> </i>5</a> </li> </ul> </div> </div> <hr /> <div class="view overlay"> <img class="card-img-top" src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap.jpg" alt="Card image cap"> <a> <div class="mask rgba-white-slight"></div> </a> </div> <div class="card">   <a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>  <div class="card-body">  <h4 class="card-title">Card title</h4> <hr>  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p> </div>  <div class="rounded-bottom mdb-color lighten-3 text-center pt-3"> <ul class="list-unstyled list-inline font-small"> <li class="list-inline-item pr-2 white-text"> <i class="fa fa-clock-o pr-1"></i>05/10/2015 </li> <li class="list-inline-item pr-2"> <a href="#" class="white-text"><i class="fa fa-comments-o pr-1"></i>12</a> </li> <li class="list-inline-item pr-2"> <a href="#" class="white-text"><i class="fa fa-facebook pr-1"> </i>21</a> </li> <li class="list-inline-item"> <a href="#" class="white-text"><i class="fa fa-twitter pr-1"> </i>5</a> </li> </ul> </div> </div>  Best, Marta

RestWish pro commented 6 years ago

Thanks Marta, I'm really grateful - this line seems to have fixed the issue (It might be worth changing the code on your elegant card so others don't have the same issue)

Marta Szymanska staff pro premium commented 6 years ago

You're welcome.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

Sue Ridler

Pro User

10Support score
6Questions 2Answers

0Snippets likes 0Snippets