Wordpress | images not show up equal after convert to responsive theme - wordpress

Question

I converted my wordpress theme to responsive..
all values of "width" change to percents (%)
and the poroblem is :
from 400px width it show:
first line 2 post
second line just one post (instead 2 post)..
how can i fix that so the page will show 2 post in all line?
i attached some pictures to explain the situation.
image of smartphone until 400px width
image of 500px

Answer 1

Ok your situation was a little tricky. The theme was not really designed in the best way to make those "blocks" responsive. To make it work I added js to your footer (you can move this to a js file if you prefer)
<script>
function equal_cols(el)
{
var divs = jQuery(el);
divs.css('height', '');
var tallestHeight = divs.map(function(i, al) {
return jQuery(al).innerHeight();
}).get();
divs.css('height', Math.max.apply(this, tallestHeight));
//alert(Math.max.apply(this, tallestHeight));
}
( window ).resize(function() {
$('.products-row').each(function(){
var el = $(this).find('.product-container');
equal_cols(el);
});
}).resize();
jQuery(window).resize(function() {
columnConform();
});
jQuery(document).ready(function() {
columnConform();
});
Then in the movie-home.php and taxonomy-movie-genre.php file I commented out the "clears" that were being added every third row. We don't need that any more since we are making all the boxes the same size with JS.
<?php /* if(++$counter % 3 == 0) : ?>
<div class="clear"></div>
<?php endif; */ ?>
The only gotcha is that all the boxes are the same size now regardless of how much content is in them.