CSS - 显示：无动作无效

Question

我在Wordpress网站上有一个工作人员部分，我正在建立每个工作人员图像上的悬停效果，显示他们的名字，职位和生物。

员工生物是很长的，客户不愿意改变它们，但是，当看到平板电脑/移动屏幕尺寸的效果时，BIOS不适合较小的图像。

我已经尝试更改字体大小，但如果我进一步减少它，文本将是不可读的。

而不是改变生物大小，我想在媒体查询中做的是阻止生物的，只是使用display:none;留下名称和标题为生物<p>标签，但我无法让它工作。

这是最好的方法吗？

这是其中一张图片的代码 -

HTML / PHP

 <div class="staff">
   <div class="masonry">            
     <div class="brick">  
       <?php if( get_field('whoweare_image1') ): ?>
         <img src="<?php the_field('whoweare_image1'); ?>" />
       <?php endif; ?>
       <div class="details">     
         <span id="info">  
           <h3><?php the_field('whoweare_name1'); ?></h3>  
           <p class="bio"><?php the_field('whoweare_text1'); ?></p>  
         </span> 
       </div>     
     </div>
     <!-- identical code for other staff member images -->
  </div>
</div>

这就是我为媒体查询所尝试的（对于ipad /平板电脑肖像） -

style.css文件

@media only screen and (min-width: 750px) and (max-width: 960px) {
  .staff .brick .details #info .bio p {
     display: none;
    }
}

在我尝试下面的<p>规则之后，我将生物类添加到CSS标签中，它阻止了包括名称/标题在内的整个文本 -

@media only screen and (min-width: 750px) and (max-width: 960px) {
     .staff .brick .details #info p {
        display: none;
    }
}

任何援助将不胜感激。

Answer 1

选择器必须是

.staff .brick .details #info p.bio { ... }

（“bio”是适用于p标签的类别）

Answer 2

你的目标错了

@media only screen and (min-width: 750px) and (max-width: 960px) {

     .staff .brick .details #info p.bio {
        display: none;
    }

}

https://jsfiddle.net/pcto2Lkj/1/

Answer 3

您可以像下面的css样式一样。

@media only screen and (min-width: 750px) and (max-width: 960px) {
     .staff .details #info .bio {
        display: none;
    }
}

Answer 4

仔细检查了元素后，我发现Wordpress已经完成了那个奇怪的事情，并在<p>标签中添加了一个类 - <p class="p2">so我将此属性作为目标并且它有效 -

 .staff .brick .details #info p.p2  {
        display: none ;
    }

我不完全理解为什么创建这些属性，但是，这已经清除了为什么<p>标签不起作用。