gpt4 book ai didi

html - CSS - 显示 :none action not working

转载 作者:太空宇宙 更新时间:2023-11-03 22:32:08 24 4
gpt4 key购买 nike

我在我正在构建的 Wordpress 网站上有一个员工部分,每个员工图像上都有悬停效果,显示他们的姓名、职位和简历。

员工简介很长,客户不愿意更改它们,但是,在查看对平板电脑/手机屏幕尺寸的影响时,简介不适合较小的图像。

我试过更改字体大小,但如果我进一步减小它,文本将无法阅读。

我想在媒体查询中做的不是更改个人简介的大小,而是屏蔽个人简介并使用 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/平板电脑纵向)-

样式.css

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

我将 bio 类添加到 <p>我试过之后的标签CSS下面的规则,它屏蔽了整个文本,包括名称/标题 -

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

如有任何帮助,我们将不胜感激。

最佳答案

选择器必须是

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

(“bio”是应用于p标签的类)

关于html - CSS - 显示 :none action not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48077019/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com