1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
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>
<!-- Card -->
<div class="card">
<!-- Card image -->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/food.jpg" alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Button -->
<a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title">Card title</h4>
<hr>
<!-- Text -->
<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>
<!-- Card footer -->
<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/Photos/Others/food.jpg" alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card">
<!-- Card image -->
<!-- Button -->
<a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title">Card title</h4>
<hr>
<!-- Text -->
<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>
<!-- Card footer -->
<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>
<!-- Card -->

Marta Wierzbicka staff answered 6 years ago

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> <!-- Card --> <div class="card"> <!-- Card image --> <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> <!-- Button --> <a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a> <!-- Card content --> <div class="card-body"> <!-- Title --> <h4 class="card-title">Card title</h4> <hr> <!-- Text --> <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> <!-- Card footer --> <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"> <!-- Card image --> <!-- Button --> <a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a> <!-- Card content --> <div class="card-body"> <!-- Title --> <h4 class="card-title">Card title</h4> <hr> <!-- Text --> <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> <!-- Card footer --> <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> <!-- Card -->   Best, Marta

Sue Ridler 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 Wierzbicka staff commented 6 years ago

You're welcome.
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: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Sue Ridler
Pro User 10Support score
6Questions 2Answers 0Snippets