Topic: Media left image not showing in card
http://mdbootstrap.com/components/list-group/
When I put the card for the reviews with the image inside a media-left, it does not show if the media div is inside a card div.
Works fine outside of it. Any thoughts?
If I put text inside of the media-left with the image tag, then the image shows, but its width is only as wide as the text...
Add comment
Yeah that works fine. But the problem is I was trying to use the media INSIDE OF A <DIV CLASS="CARD">
which does not work.
I actually found a solution:
.card .media-left img {
max-width: initial;
}
Adam, try this code:
<div class="col-md-12">
<!--First review-->
<div class="media">
<a class="media-left waves-light">
<img class="rounded-circle" src="http://mdbootstrap.com/img/Photos/Avatars/avatar-13.jpg" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum sit id ullam eum vel delectus!</p>
</div>
</div>
<!--Second review-->
<div class="media">
<a class="media-left waves-light">
<img class="rounded-circle" src="http://mdbootstrap.com/img/Photos/Avatars/avatar-14.jpg" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Nathan Casie</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum sit id ullam eum vel delectus!</p>
</div>
</div>
<!--Second review-->
<div class="media">
<a class="media-left waves-light">
<img class="rounded-circle" src="http://mdbootstrap.com/img/Photos/Avatars/avatar-15.jpg" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Dave Snow</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum sit id ullam eum vel delectus!</p>
</div>
</div>
</div>
Those are blade templating comments. You can go ahead and delete those out and you can see what I am talking about.
<div class="media">
<a class="media-left waves-light">
<img class="rounded-circle" src="http://mdbootstrap.com/img/Photos/Avatars/avatar-13.jpg" alt="Test">
</a>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ia. Quasilam eum vel delectus!</p>
</div>
</div>
<div class="card">
<div class="card-block">
<div class="media">
<a class="media-left waves-light">
<img class="rounded-circle" src="http://mdbootstrap.com/img/Photos/Avatars/avatar-13.jpg" alt="Test">
</a>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ia. Quasilam eum vel delectus!</p>
</div>
</div>
<div class="media">
<a class="media-left waves-light">
Text
<img class="rounded-circle" src="http://mdbootstrap.com/img/Photos/Avatars/avatar-13.jpg" alt="Test">
</a>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ia. Quasilam eum vel delectus!</p>
</div>
</div>
</div>
</div>
http://pasteboard.co/bNXv6gfer.png
{{--Good since outside of card--}}
<div class="media">
<a class="media-left waves-light">
<img class="rounded-circle" src="http://mdbootstrap.com/img/Photos/Avatars/avatar-13.jpg" alt="Test">
</a>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ia. Quasilam eum vel delectus!</p>
</div>
</div>
<div class="card">
<div class="card-block">
{{--bad since inside card--}}
<div class="media">
<a class="media-left waves-light">
<img class="rounded-circle" src="http://mdbootstrap.com/img/Photos/Avatars/avatar-13.jpg" alt="Test">
</a>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ia. Quasilam eum vel delectus!</p>
</div>
</div>
{{--Less bad since has text inside media-left--}}
<div class="media">
<a class="media-left waves-light">
Text
<img class="rounded-circle" src="http://mdbootstrap.com/img/Photos/Avatars/avatar-13.jpg" alt="Test">
</a>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ia. Quasilam eum vel delectus!</p>
</div>
</div>
</div>
</div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No