images displaying one below another in smaller screens

Question

we are using below code to display 4 images, but its not responsive as in link1 , mainly the middle 2 images in 2nd row is displaying one below the other in smaller screens.

if anyone want : Jsfiddle

we are using similar code in link2 but this looks responsive.

 .top-designs1 > h1, .mens-block > h1, .womens-collection > h1, .fan-book > h1 {color: #000;padding-top: 5px;text-align: center;} .tow-grid1 .left {float: left;width: 50%;} .tow-grid1 .right {float: right;width: 50%;} .full-grid1 {margin-bottom: 10px;} 

 <div class="top-designs1"> <div class="tow-grid1"> <div class="full-grid1"> <img src="http://sbdev2.kidsdial.com:81/media/wysiwyg/a1.jpg" width="1000px" /> </div> <div style="clear: both; margin-bottom: -10px;">&nbsp; </div> <div class="left"> <img src="http://sbdev2.kidsdial.com:81/media/wysiwyg/a2.jpg"}}" width="495px" /> </div> <div class="right"> <img src="http://sbdev2.kidsdial.com:81/media/wysiwyg/a3.jpg"}}" width="495px" /> </div> <div style="clear: both; margin-bottom: -10px;">&nbsp; </div> <div class="full-grid1"> <img src="http://sbdev2.kidsdial.com:81/media/wysiwyg/a4.jpg" width="1000px" /> </div> </div> </div> 

Answer 1

You have several things colliding there, i don't know if you are using some grid system or that you made it yourself but I put together a small example using flexbox so you can take a look (I believe it's much cleaner than what you have).

<div class="grid">
  <div class="item">
     <img src="http://placehold.it/350x300">
  </div>
  <div class="item">
    <img src="http://placehold.it/350x300">
  </div>
</div>

.grid {
  display: flex;
  height: 300px;
  flex-wrap: wrap;
  max-width: 1024px;
}

.item {
  flex-basis: 50%;
  height: 300px;
  min-width: 350px;
}

http://codepen.io/pedromrb/pen/EZNBQZ

Hope it helps, you can resize it to see it wrap.

Any question feel free to ask.

Answer 2

如果要使图像响应，可以检查一下吗

 .top-designs1 img{ width:100%; display:block;}