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 trial

CSS Bootstrap Basics Building Forms With Bootstrap Add Custom CSS to Your Bootstrap Site

Mustafa Ogün Öztürk
Mustafa Ogün Öztürk
3,468 Points
Posted by Mustafa Ogün Öztürk
Mustafa Ogün Öztürk
3,468 Points

Media 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.

Salma Elshahawy
Salma Elshahawy
6,049 Points
Salma Elshahawy
Salma Elshahawy
6,049 Points

I 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

1 Answer

Naty Sipka
Naty Sipka
5,212 Points
Naty Sipka
Naty Sipka
5,212 Points

Hi,

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
Peter Furler
31,647 Points

For 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.