Question

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

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

我已经尝试更改字体大小，但如果我进一步减少它，则文本将无法读取。

而不是改变生物大小，我想要在媒体查询中做的是阻止生物的，只留下名称＆amp;使用display:none;生成标签的标题，但我无法使其生效。

这是最好的方法吗？

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

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

在我尝试下面的规则之后，我将bio class添加到了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 { ... }

（＆＃34; bio＆＃34;是应用于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已经完成了那个奇怪的事情，并在标记中添加了一个类 - 所以我将此属性作为目标并且它有效 -

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

我不完全理解为什么会创建这些属性，但这已经清除了为什么标记不起作用。

CSS - 显示：无动作无效

4 个答案: