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

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.