Trying to create a thumbnail for my image, having issues

I’m working on the Tribute challenge right now and in the example the image is nested in a thumbnail.

I’m trying to do the same on mine but I can’t seem to figure out how the thumbnail works. I read about it on the bootstrap website but it just doesn’t seem to work on my codepen: http://codepen.io/colesam/pen/YZjbzK

Example pen from FCC: https://codepen.io/freeCodeCamp/pen/NNvBQW

I have a feeling that I’m not formatting something correctly with the rows/columns in bootstrap. If someone could explain where I went wrong I’d really appreciate it.

Not sure what you’re trying to achieve. Everything looks good as far as I can tell. Tour image is only 600x450px so it’s not gonna take more than those 600px unless you stretch it.

I’m trying to get a nice frame for my picture and the caption below it.

Here’s what I’m trying to get around my image:

I was able to achieve the nice frame by adding the class .img-thumbnail, but the caption is still on it’s own not really connected to the picture.

Your CSS is the problem. Try to delete it and it’ll work! :slight_smile:

I correct myself, bootstrap is the problem. It appears the version you are using had some changes since this version the other example is using: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

Check out the new documentation or use the old version I just posted! :smiley:

1 Like

That fixed it, thank you very much. I’m now running into an issue where when the screen is stretched wider, the thumbnail seems to widen while the picture stays the same size. Any tips for this?

Here’s what I’m talking about:

Here’s my code:

<body>
	<div class="container-fluid">
		<div class="jumbotron-fluid" style="background-color: white">
			<h1 class="text-center" id="title">Christopher J. McCandless</h1>
			<div class="row">
				<div class="col-xs-8 col-xs-offset-2">
					<div class="thumbnail">
						<img src="http://www.jeffhead.com/images/ITW-07.jpg" class="img-responsive" id="picture-main">
						<div class="caption text-center">
							<h3><em>Christopher McCandless standing in the Alaskan Wild</em></h3>
						</div>
					</div>
				</div>
			</div>
			<br>
			<br>
			<div id="content">
				<h2 class="text-center">Who is Alexander Supertramp?</h2>
				<p>
					Christopher J. McCandless was an American hiker and itinerant traveler, who also went by the name "Alexander Supertramp". After graduating from college in 1990, McCandless traveled the United States, and eventually hitchhiked to Alaska in April 1992.There,
					he set out along an old mining road known as the Stampede Trail, with minimal supplies, hoping to live simply off the land. Almost four months later, McCandless' decomposing body, weighing only 30 kilograms (66 lb), was found by hunters in a converted
					bus used as a backcountry shelter along the Stampede Trail, on the eastern bank of the Sushana River. His cause of death was officially ruled to be starvation, although the exact cause remains the subject of some debate.
				</p>
			</div>
		</div>
	</div>
</body>
body {
	margin-top: 0px;
	margin-left: 100px;
	margin-right: 100px;
	background-color: #2b4023;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

p {
	padding: 2%;
	padding-left: 15%;
	padding-right: 15%;
}

h1 {
	color: black;
	padding: 30px;
	padding-top: 60px;
	font-size: 350%;
}

h2 {

}

h3 {
	font-size: 100%;
}

add
img { width: 100% }
to your CSS so that it will fill completely the parent element

1 Like

Oh man sweet! Thank you!

it’s the bootstrap if you use the old cdn then you will have problems when using the new documentation. I had the same prolbems.

This just helped me out big time. I’ve been trying to figure out why that wasn’t filling for quite a while longer than I’d like to admit.

Thank you!!

1 Like