Topic: Cards give weird gap shadow underneath

fadhli_sani free asked 5 years ago


When in small screen size. the cards give weird shadow gap underneath the card.
and also it is in card-deck class div

<!--Card-->
<mdb-card>
<!--Card image-->
<div class="view overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/food.jpg"></mdb-card-img>
<a
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--/.Card image-->
<!--Button-->
<a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3 waves-light" mdbWavesEffect>
<i class="fa fa-chevron-right pl-1 waves-light" mdbWavesEffect></i>
</a>
<!--Card content-->
<mdb-card-body>
<!--Title-->
<mdb-card-title>
<h4>Card title</h4>
</mdb-card-title>
<hr>
<!--Text-->
<p class="font-small grey-dark-text mb-0">Some quick example text to build on the card title and make up
the bulk of the card's content.</p>
</mdb-card-body>
<!--/.Card content-->
<!-- Card footer -->
<mdb-card-footer class="mdb-color lighten-3 text-center">
<ul class="list-unstyled list-inline font-small mt-3">
<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>
</mdb-card-footer>
<!-- Crd footer -->
</mdb-card>
<!--/.Card-->

 


Damian Gemza staff answered 5 years ago


Dear @fadhli_sani 

Could you please provide me with the screenshots of actual behavior? I don't see there anything which would be weird.

Best Regards,

Damian



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 Angular
  • MDB Version: 7.0.0
  • Device: desktop
  • Browser: chrome
  • OS: window 10
  • Provided sample code: Yes
  • Provided link: No
Tags