0

I'm trying to create figures that contain an image and a caption which contains the title, a description and a progress bar.

They look like this

<figure class="col-sm-6 item game">

    <a href="item.html"><img src="http://placehold.it/440x250&text=440x250+Game" class="img-responsive" alt="Game"></a>

      <!-- Item Hover Options -->
      <figcaption>
        <!-- Item Title -->
        <h1>Game Title</h1>
        <!-- Item Description -->
        <p>Game Description</p>
        <!-- Item Progress -->
        <div class="progress progress-striped">
          <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
            <span class="sr-only">20% Complete</span>
          </div><!-- END progress bar -->
        </div><!-- END progress div -->

      </figcaption>

    </figure>

The problem I am having is that when the browser in resized to mobile view the figcaption does not resize as well...

This is a fiddle of what I have so far: http://jsfiddle.net/DK76P/1/

As you will see when you resize the preview box, the caption does not resize accordingly...

Any help is much appreciated :)

user3752971
  • 33
  • 2
  • 7
  • http://stackoverflow.com/questions/11460066/centering-and-aligning-width-of-figcaption-tag-on-image-in-figure-tag may shed some light on issue – Ruskin Jun 18 '14 at 15:34

1 Answers1

0

It affects the whole figcaption element and it is something in bootstrap's css - likely the non-mobile parts

EDIT

The problem is with 

.panel-body {
    width: 960px;
    ...

Remove that and you are fine.

Read up on the Bootstrap grid system for more info http://getbootstrap.com/css/#grid

Ruskin
  • 5,721
  • 4
  • 45
  • 62