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

Question

我将我的 wordpress 主题转换为响应式.. "width" 的所有值都更改为百分比 (%)

问题是：

从 400px 宽度显示：

第一行 2 post

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

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

我附上一些图片来说明情况....

image of smartphone until 400px width

image of 500px

Answer 1

好的，你的情况有点棘手。主题并不是真正以最好的方式设计来让那些 "blocks" 响应。为了让它工作，我将 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 文件中，我注释掉了每三行添加一次的 "clears"。我们不再需要它了，因为我们正在使用 JS 将所有盒子制作成相同大小。

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

唯一的问题是现在所有的盒子大小都一样，不管里面有多少内容。

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

second line show just one post (instead 2 post)

wordpress

show