Question

176

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

rated 0 times [ 181] [ 5] / answers: 1 / hits: 23264 / 11 Years ago, wed, january 8, 2014, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alessandrol

Add To Favorites

Follow

Total Points: 286

Total Questions: 107

Total Answers: 109

Location: Uzbekistan

Member since Sat, Feb 27, 2021

3 Years ago

answered 11 Years ago jaylynkarinam · Accepted Answer

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.