Question

我安装了一个名为Display-listings-shortcode的插件，并添加了columns-extension以允许列在RitaNaomi.com主页中间的博客将在Web浏览器上水平显示。一开始看起来很糟糕，图像旁边和下面都有标题，但最终我想出了如何编辑.display-posts-listing类来改变显示

.display-posts-listing .listing-item {padding-bottom:30;}

.listing-item
{
  float:left;
  width:22%;
  margin: 40px
  }

但是当我在移动设备上看到它们时，它们全都被揉在一起，好像它仍然在笔记本电脑上显示一样。我希望将它垂直列出而不是水平列出，因为这是最适合的方式。

我尝试使用@media通过css更改它（并且没有用）但是它没有用。 @media handheld {

 .display-posts-listing .listing-item {
  clear: both;
  display: block;
   }

 .display-posts-listing img {
  float: left;
  margin: 0 10px 10px 0;
   }
   }

Answer 1

您不应该使用@media handheld {}，因为它已根据MDN弃用。

您最好定位像素宽度值。您可能需要一些查询，而某些旧学校标准为1023px，767px。您可以随意替换下面的900px。

@media only screen and ( max-width: 900px ){
   .display-posts-listing .listing-item {
       /* CSS Here */
   }
}

Answer 2

删除了已从原始主题添加的自定义CSS。它干扰了Columns显示。

不使用@media handheld {}，因为它已被弃用（感谢响应的xhynk），而是使用命令（max-width：768），标题和图像css看起来很时髦。

要在更大的屏幕上将标题显示在自己的行上，我将其添加到我的CSS：

.display-posts-listing .listing-item .title { display: block; }

现在我正在使用上面的媒体查询来弄清楚如何在较小的设备上设置样式。

完整的CSS：https://gist.github.com/billerickson/17149d6e77b139c868640a0ed3c73b3a

Display-Listings-Shortcode上的响应式CSS

2 个答案: