I want to put a caption below the image.

[vet911]

I want to put a caption below the image and have it move in this responsive layout with the image.

Any help would be appreciated.

<style>
/* For small devices (e.g. smartphones) */
img {
  max-width: 100%;
  display: inline-block;
  padding: 0.5%;
}
/* For medium devices (e.g. tablets) */
@media (min-width: 420px) {
  img {
    max-width: 100%;
  }
}
/* For large devices (e.g. desktops) */
@media (min-width: 960px) {
  img {
    max-width: 33%;
  }
}
</style>
<div>
 <img src="images/69dyellow.png"  />
 <img src="images/65silver.png"  />
 <img src="images/64red.png"  />
 <img src="images/66blue.png" />
</div>

[scootstah]

So, you're not even going to attempt?

[vet911]

Okay I took it to heart. I have figured it out. It works fine but the text is a little to far from the image. Not sure how to fix that. I tried using padding but didn't seem to work. Any help?

<style>
.image-holder
	{
  float:left;
  margin:5px;
  text-align: center;
  padding:10px 10px 0px 10px;
  color:#000; 
}

</style>

     <div class="image-holder">
     <img src="images/69astro_red.png" alt="" />
     <p>1969 Astro Red Convertible</p>
     </div>
     <div class="image-holder">
     <img src="images/69my.png" alt="" />
     <p>1969 Daytona Yellow </p>
     </div>
     <div class="image-holder">
     <img src="images/69dyellow.png" alt="" />
     <p>1969 Dark Yellow #W995</p>
     </div>
     <div class="image-holder">
     <img src="images/69red_no_head_1.png" alt="" />
     <p>1969 Red Convertible w/no headrest</p>
     </div>

[cyberRobot]

Try playing around with the margin property for the <p> tags. More information can be found here:

https://developer.mozilla.org/en-US/docs/Web/CSS/margin

[scootstah]

Your solution is fine, but I just want to point out that in HTML5 there are two new elements for accomplishing this very thing: figure and figcaption. It's not as compatible as just using div and p though, but more semantic.

 

Here is an example: http://jsfiddle.net/tvzvzw97/