提问人:Yunes Ehsanpour 提问时间:10/26/2023 最后编辑:Yunes Ehsanpour 更新时间:10/26/2023 访问量:41
显示:无;在媒体查询中不起作用 [重复]
display: none; in media query not working [duplicate]
问:
.albums .next_album {
display: flex;
justify-content: center;
align-items: center;
flex-basis: 50px;
background: rgba( 255, 255, 255, 0.1 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 9.5px );
-webkit-backdrop-filter: blur( 9.5px );
border-radius: 5px;
color: #aaaaaa;
font-size: 1.3rem;
cursor: pointer;
}
/* start media query */
@media only screen and (max-width: 992px) {
.next_album {
display: none;
}
.albums {
flex-wrap: wrap;
}
}
<div class="week_album">
<h2>Album of the week</h2>
<div class="albums">
<div class="single_album">
<div class="image_album">
<img src="elm050120fobcover0004a-1585330301.jpg" alt="this is a album">
</div>
<h3>Dua Lipa</h3>
<p>If it ain't me</p>
</div>
<div class="single_album">
<div class="image_album">
<img src="unnamed.jpg" alt="this is a album">
</div>
<h3>Erfan</h3>
<p>Fargh Dareh</p>
</div>
<div class="single_album">
<div class="image_album">
<img src="0b66f3ccb36641d285b8e84d7619d5ed.png" alt="this is a album">
</div>
<h3>Poobon</h3>
<p>Tigh</p>
</div>
<div class="single_album">
<div class="image_album">
<img src="halsey-attends-the-2022-bud-light-super-bowl-music-fest-at-crypto.com-arena-in-los-angeles-100222_5.jpg" alt="this is a album">
</div>
<h3>Halsey</h3>
<p>New Americana</p>
</div>
<div class="single_album">
<div class="image_album">
<img src="Yas,_Iranian_rapper_live_in_2018_05_(cropped).jpg" alt="this is a album">
</div>
<h3>Yas</h3>
<p>Beem</p>
</div>
<div class="next_album">
<i class="fa-solid fa-chevron-right"></i>
</div>
</div>
</div>
我有一个带有类“albums”和一些 div 元素的 div。其中一个有一个名为“next_album”的类,它有.我希望当窗口大小达到 992px 时将其完全删除。但是媒体查询不起作用。
Somebode可以帮我解决这个问题吗?
我快疯了。display: flex;
display: none;
我需要补充一点,我在 next_album 之后放置了另一个 div 进行测试,我给了它一个 dsiplay:flex;和显示:无;在媒体查询部分,它奏效了!我的意思是它以 992px 或更小的宽度消失了。这是我存储库的添加器。
答: 暂无答案
评论
.albums .next_album { display: none; }
.next_album
.albums .next_album