Bootstrap's media object image is not responsive inside of tab

Question

I'm using the tab function to create a series of specials inside each tab I have an image, a header, and some body copy. I thought that using bootstraps media object component would work, which it does, except when it's resized to mobile.

When sized to mobile the header and body copy will flow overtop their container, but the image will stay the same size, breaking the design.

Is there a way to make the image resize, or is there a fix that allows the container to resize and make the header and body copy drop beneath the image?

Please see the jsfiddle for the code: http://jsfiddle.net/DTcHh/126/

I'm a first time user, sorry for any errors. Thank you in advance

<div class="container ">
<div class="row clearfix">
    <div class="col-md-12 column">
        <div class="tabbable" id="tabs-1">
            <ul class="nav nav-pills">
                <li class="active">
                    <a href="#panel-1" data-toggle="pill">Special 1</a>
                </li>
                <li>
                    <a href="#panel-2" data-toggle="pill">Special 2</a>
                </li>
                <li>
                    <a href="#panel-3" data-toggle="pill">Special 3</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active specials" id="panel-1">

                    <div class="media">
                      <a class="pull-left" href="#">
                          <img class="media-object img-responsive" src="http://i.imgur.com/SvujmcS.jpg" alt="240x240">
                      </a>
                      <div class="media-body ">
                        <h2 class="media-heading special-headline clearfix">Headline for special #1</h2></br><p class="special-paragraph clearfix
                        "> wow.lorem CSS. very placeholder. very generator. lorem dogescript. many ipsum.</p>
                      </div>
                    </div>
                </div>

                <div class="tab-pane" id="panel-2">
                    <p>
                        This is the special for #2.
                    </p>
                </div>
                <div class="tab-pane" id="panel-3">
                    <p>
                        The thrid Special.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Below are some solutions to mimic a media object with a responsive feature.

1. A workaround based on media object:

   <div class="media">
     <img class="pull-left img-responsive" src="http://i.imgur.com/SeO7616.png" style="max-width: 33.33%">
     <div class="media-body">
       <h2>Headline</h2>
       Content
     </div>
   </div>
   

   The image width is controlled by the percentage of the containing DIV media via max-width. This setting overwrites the definition in img-responsive class which sets max-width to 100%.

2. Another one based on the grid system:

   <div class="container">
     <div class="row">
       <div class="col-xs-4">
         <img class="img-responsive" src="http://i.imgur.com/SeO7616.png">
       </div>
       <div class="col-xs-8">
         <h2>Headline</h2>
         Content
       </div>
     </div>
   </div>
   

   The image width is scaled with the column essentially.

3. And this is a simplification based on Christina's answer:

   <div class="container">
     <div class="row">
       <div class="col-xs-4">
         <img src="http://i.imgur.com/SeO7616.png" style="width: 100%">
       </div>
       <div class="col-xs-8">
         <h2>Headline</h2>
         Content
       </div>
     </div>
   </div>
   

Live demo here.

Answer 2

The Bootstrap Media Object is not responsive on purpose. Their tabs are also not responsive, I didn't mess with those. They would be disjointed if you just fiddle with the css. I would use the grid on the guts but there's responsive tabs to accordions out there that would work better https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion

You have to use the grid system for this type of set up:

---

DEMO: http://jsbin.com/odoTexeN/1/

http://jsbin.com/odoTexeN/1/edit

---

<div class="container ">
 <div class="row clearfix">
  <div class="col-md-12 column">
   <div class="tabbable" id="tabs-1">
    <ul class="nav nav-pills">
     <li class="active"> <a href="#panel-1" data-toggle="pill">Special 1</a> </li>
     <li> <a href="#panel-2" data-toggle="pill">Special 2</a> </li>
     <li> <a href="#panel-3" data-toggle="pill">Special 3</a> </li>
    </ul>
    <div class="tab-content">
     <div class="tab-pane active specials" id="panel-1">
      <div class="row">
       <div class="col-xs-6 col-sm-4">
        <a href="#"> <img class="img-fullwidth img-min-height-width-100" src="http://i.imgur.com/SvujmcS.jpg" alt="260x260"> </a>
       </div>
       <!--/col-*-4-->
       
       <div class="col-xs-6 col-sm-8">
        <h2 class="">Headline for special #1</h2>
       </div>
       <!--/col-*-8-->
      </div>
      <!--/row-->
     </div>
     <!--/tab-pane-->
     
     <div class="tab-pane specials" id="panel-2">
      <div class="row">
       <div class="col-xs-6 col-sm-4">
        <a href="#"> <img class="img-fullwidth img-min-height-width-100" src="http://i.imgur.com/SvujmcS.jpg" alt="260x260"> </a>
       </div>
       <!--/col-*-4-->
       
       <div class="col-xs-6 col-sm-8">
        <h2 class="">Headline for special #2</h2>
       </div>
       <!--/col-*-8-->
      </div>
      <!--/row-->
     </div>
     <!--/tab-pane-->
     
     <div class="tab-pane specials" id="panel-3">
      <div class="row">
       <div class="col-xs-6 col-sm-4">
        <a href="#"> <img class="img-fullwidth img-min-height-width-100" src="http://i.imgur.com/SvujmcS.jpg" alt="260x260"> </a>
       </div>
       <!--/col-*-4-->
       
       <div class="col-xs-6 col-sm-8">
        <h2 class="">Headline for special #3</h2>
       </div>
       <!--/col-*-8-->
      </div>
      <!--/row-->
     </div>
     <!--/tab-pane-->
     
    </div>
    <!--/tab-content 1 -->
    
   </div>
   <!--/tabbable -->
   
  </div>
  <!--/col-*-12 column -->
 </div>
 <!--/row-->
</div>
<!--/container-->

CSS

/* new
================================================== */   

/* image adjustments */
.img-fullwidth {
    width: 100%
}
.img-min-height-width-50 {
    min-height: 50px;
    min-width: 50px;
}
.specials h2 {
    font-size: 100%
}
@media (min-width:768px) { 
    .specials h2 {
        font-size: 160%
    }
}
/* tighten up the columns and use percentages for the gutter */
.specials .row {
    margin-left: -1.25%;
    margin-right: -1.25%;
}
.specials .row [class*="col-"] {
    padding-left: 1.25%;
    padding-right: 1.25%;
}

The class for the min-height image needs to be changed in the CSS too, if you want to use it. I have it incorrect here.

Answer 3

i Achieve something like this... it works for me

<div class="media"> 
<div class="pull-left visible-lg visible-md media-left"><img class="img-thumbnail media-object" src="img/newsletter/3-la.jpg" alt="img/newsletter/3-la.jpg"></div>
<div class="media-body">
<img class="hidden-lg hidden-md center-block img-responsive img-thumbnail media-object" src="img/newsletter/3-la.jpg" alt="img/newsletter/3-la.jpg"><br class="hidden-lg hidden-md">
<h4 class="roboto media-heading">“Tomorrow’s</h4>
<p>sasa</p>

</div>
</div>

Class "media-left" will be visible only in LG and MD screens and in lower screen sizes IMG in media-body will show itself...