Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialMustafa Ogün Öztürk
3,468 PointsMedia Object Thumbnail Image Sizing
Hi again
I am trying to do this media object extra practice that is mentioned at the end of the Bootstrap course and i am having problems while trying to re-size big thumbnail images.
That is my solution so far but i am not sure if it is a proper solution for responsive design.
<div class="media">
<img class="d-flex mr-3 img-fluid rounded-circle" src="img/thumbnails/avatar-nodestradamus.png" height="50" width="50">
<div class="media-body">
<div class="d-flex justify-content-between">
<h5 class="mb-1">Keynote: Internet of Things</h5>
<span class="badge badge-pill badge-info p-2">10:00am</span>
</div>
<p class="mb-1">NodeStradamus</p>
</div>
</div>
I dont think giving constant height and width values to an image would be a good idea for responsive design so I would be appreciated if someone can help me about it.
Thanks in advance.
1 Answer
Naty Sipka
5,212 PointsHi,
You can check my solution posted below. Thumbnails are shown only on extra large and large sized screens, and hidden on medium and smaller. Hope it helps :)
<!-- schedule -->
<h1 id="schedule" class="display-4 text-center my-5 text-muted"> Schedule </h1>
<ul class="list-group">
<li class="list-group-item">
<div class="d-flex media row">
<img class="rounded-circle mr-3 col-1 d-none d-lg-block d-xl-block" src="img/avatar-nodestradamus.png" alt="Avatar Nodestradamus">
<div class="media-body m-2">
<span class="badge badge-pill badge-info p-2 ml-2 float-right">9:00 am</span>
<h5 class="mb-1"> Keynote: Internet of Things </h5>
<p class="mb-1"> NodeStradamus</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="d-flex media row">
<img class="rounded-circle mr-3 col-1 d-none d-lg-block d-xl-block" src="img/avatar-vivianne.png" alt="Avatar Vivianne">
<div class="media-body m-2">
<span class="badge badge-pill badge-info p-2 float-right">10:00 am</span>
<h5 class="mb-1"> React Basics </h5>
<p class="mb-1"> Vivianne McVue </p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="d-flex media row">
<img class="rounded-circle mr-3 col-1 d-none d-lg-block d-xl-block" src="img/avatar-jay.png" alt="Avatar Jay">
<div class="media-body m-2">
<span class="badge badge-pill badge-info p-2 float-right">11:00 am</span>
<h5 class="mb-1"> Hey, Mongo! </h5>
<p class="mb-1"> Jay Query </p>
</div>
</div>
</li>
<li class="list-group-item list-group-item-success">
<div class="d-flex justify-content-between">
<h5 class="mb-1"> Lunch </h5>
<span class="badge badge-pill badge-info p-2">12:00 am</span>
</div>
<p class="mb-1"> Free Pizza for everyone! </p>
</li>
</ul>
<!-- /schedule -->
Peter Furler
31,647 PointsFor your thumbnail image, I believe it is not necessary for you to have both "d-lg-block" and "d-xl-block". You are only required to have "d-lg-block".
This is because with bootstrap when you declare a break point it is from that size and up.
Salma Elshahawy
6,049 PointsSalma Elshahawy
6,049 PointsI used two classes to show the image as a thumbnail (.thumbnail) and (col-sm-1) <img class="d-flex align-self-start mr-1 thumbnail col-sm-1" src="img/avatar-vivianne.png" alt="Generic placeholder image">
but I faced a problem in aligning the content