CSS: Make Images with text below them Responsive

Question

So I have the following scenario:

If it was all images I coudl easily make them responsive by changing the width percentage on different view ports however the problem here is that the images have varying text below them, so when you make the width smaller the text will push the item below it.

Is there a way to make this type of scenario responsive?

Answer 1

Here is the Responsive Layout example, This layout will fit it as per screen resolution.

Only have to Keep in mind when making Responsive layout every value should be in % and using @media queries the layout can fit from mobile to tablet devices.

For example check this CSS code..

ul, p{margin:0; padding:0;}
#gallery li {float:left;list-style-type:none; 
  padding:2px; min-width:22%;max-width:100%;width:22%}
#gallery li img{display:block;width:100%;height:100%;}
p{border:1px solid #000;width:100%;height:100%;}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
 {
   ul#gallery{width:100%}
 }
 ul, p{margin:0; padding:0;}
  #gallery li{width:100%;display:block;float:left;}
}

Check the Demo here. http://jsbin.com/divuvehe/1/edit