Making responsive multiple divs

Best way will be using some responsive framework. Replace the css I hope it will make you images responsive for all devices.

<div id="wrapper">
  <div id="main-content">
    <div id="img-row" >
      <a href=""><button  class="button"> Ask   </button>   </a>
    </div>
    <div id="img-row">
        <div class="img-item">
            <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a>
        </div>
        <div class="img-item">
            <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a>
        </div>
    </div>
    <div id="img-row">
       <div class="img-item">
            <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a>
        </div>
        <div class="img-item">
            <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a>
        </div>
    </div>
  </div>
</div>

And use this css

#wrapper {
    margin: 0 auto;
    max-width: 960px;
}
#main-content {
    background: #fff;
    padding: 7px;
    width: 100%;
    min-height: 400px;
    box-sizing: border-box;
}
.img-item {
    padding: 15px 15px;
    width: 50%;
    margin: 10px 0;
    float: left;
    box-sizing: border-box;
    position: relative;
}
.images {
    width: 100%;
    position: relative;
    z-index: 50;
}
#img-row > a {
    position: relative;
}
#img-row {
    overflow: hidden;
}
#img-row:after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.button {
    display: block;
    background-color: #bbb;
    margin: 10px;
}
button.button {
    width: 250px;
    margin: 25px auto;
    height: 40px;
    font-size: 30px;
}
.wp-caption-text {
    display: block;
    position: absolute;
    width: 100%;
    color: #ffffff;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 700;
    z-index: 200;
    font-size: 40px;
    transform: translateY(-50%)
}
@media screen and (max-width: 767px) {
    .img-item {
        padding: 7px;
        width: 100%;
    }
}

JSFiddle

first you need to change the width of #wrapper to auto, and change the images from inline to block, so basically your media screen css should look like this :

 @media screen and (max-width: 480px) {
   #wrapper {
      height: auto; overflow: hidden;
      width: auto;
   }
   .images {
     display: block;
     width:100%;
     padding: 0;
   }
   #main-content {     
       float: none;
       margin-right:0;
       width:auto;
    }
    button.button {
      width: 100%;
      margin: 15px 0;
    }
    .img-row > a {
      display: block;
    }
    .wp-caption-text {
        /* this will center the title in the vertically*/
        top: 50%;
        transform: translateY(-50%);
        /*------------------------------------------*/  
      padding: 0;
    }
}

PS

don't use the same id for multiple element but use class instead #img-row to .img-row and remove bottom:1x; from .wp-caption-text

Updated JSFIDDLE

try to use max-width:100%, and image row have two image, so maybe image need be max-width:(<50%) ?

#wrapper { 
    margin: 0 auto; 
    max-width: 960px; 
} 
#main-content { 
    background: #fff; 
    padding: 7px 7px 7px 7px; 
    max-width: 946px; 
    min-height: 400px; 
    float: left; 
} 
 
.images { 
  vertical-align: middle; 
  padding: 0px 15px 15px 15px; 
  max-width: 45%; 
  margin: 10px 0; 
} 
#img-row { 
  display: block; 
  margin-top: -15px; 
  position: relative; 
  height: auto; 
  max-width: auto; 
  overflow-y: hidden; 
  overflow-x: auto; 
  word-wrap: normal; 
  white-space: nowrap; 
  text-align: center; 
} 
#img-row > a { 
  position: relative; 
} 
#img-row:after { 
  content: ""; 
  position: absolute; 
  display: block; 
  left: 0; 
  top: 0; 
  max-width: 100%; 
  height: 100%; 
  z-index: 1; 
} 
.button { 
  display: block; 
  background-color: #bbb; 
  margin: 10px; 
} 
button.button { 
  max-width: 570px; 
  margin-left: 182px; 
  height: 40px; 
  font-size: 30px; 
} 
.wp-caption-text { 
  display: block; 
  position: absolute; 
  width: 100%; 
  color: white; 
  left: 0; 
  top: -30px; 
  bottom: 1px; 
  padding: 5px; 
  font-weight: bolder; 
  z-index: 2; 
  font-size: 40px; 
 
}

<div id="wrapper"> 
  <div id="main-content"> 
    <div id="img-row" > 
      <a href=""><button  class="button"> Ask	</button>	</a> 
    </div> 
    <div id="img-row"> 
        <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a> 
        <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a> 
    </div> 
    <div id="img-row"> 
       <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 3</figcaption></a> 
       <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 4</figcaption></a> 
    </div> 
  </div> 
</div>