Question

我将自己的wordpress主题转换为响应式... 所有＆＃34;宽度＆＃34;改为百分数（％）

，问题是：

从400px宽度显示：

第2行发布

第二行只有一个帖子（而不是2个帖子）..

我如何解决这个问题，以便页面在所有行中显示2个帖子？

我附上一些照片来解释情况......

image of smartphone until 400px width

image of 500px

Answer 1

好的，你的情况有点棘手。主题并没有真正设计为使这些“块”响应的最佳方式。为了使它工作，我将js添加到您的页脚（如果您愿意，可以将其移动到js文件中）

<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();
});

然后在movie-home.php和taxonomy-movie-genre.php文件中，我注释掉了每隔三行添加的“清除”。我们不再需要它，因为我们使用JS制作所有相同尺寸的盒子。

<?php /* if(++$counter % 3 == 0) : ?>
  <div class="clear"></div>
<?php endif; */ ?>

唯一的问题是现在所有的盒子都是相同的大小，无论它们有多少内容。

第二行只显示一个帖子（而不是2个帖子）

1 个答案: