如何解决显示:没有在手机上无法正常工作
这里有一个CSS
代码,我想在PC视图上将其隐藏,但在Phone视图上可见,我可以在PC上而不是在Phone上实现我的结果,因为display: none;
正在干扰代码的工作。有人可以检查一下吗?
/* --------- Game-section-mobile---------*/
* {
transition: all .155s ease-in-out;
}
.event-link {
margin: 300px 0 0 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
}
.event-h3 {
margin-top: 30px;
}
.events {
display: flex;
flex-wrap: wrap;
display: none;
}
.events .shadowbox {
height: 100vh;
padding-top: 0;
background: rgba(0,0.5);
}
.event {
text-align: center;
margin-top: 0;
min-width: 100px;
background-repeat: no-repeat;
}
.event .event-h3 {
padding-top: 50px;
}
.event {
background-size: cover;
background-position: center;
height: 100vh;
flex-grow: 1;
flex-basis: 0;
text-align: center;
min-width: 100px;
background-repeat: no-repeat;
}
.event:hover {
flex-grow: 2;
}
.events .shadowbox:hover {
background: rgba(0,0.76);
}
.event .event-h3,.event p {
color: white;
width: 90%;
margin: auto;
}
.event:not(:first-of-type) {
border-left: 1px solid white;
}
.shadowbox img{
margin-top: 50%;
height: 200px;
}
@media only screen and (max-width: 775px) {
.event:last-of-type {
margin-bottom: 10px;
}
.event:hover {
flex-grow: 1;
}
.event:nth-of-type(1) {
max-width: 100%;
}
.event {
min-width: 300px;
margin-bottom: 3px;
}
.shadowbox img{
margin-top: 50%;
height: 150px;
}
}
@media only screen and (max-width: 775px){
.events{
display: block;
}
}
解决方法
您将对.events进行第二次媒体查询。因此,当您的屏幕宽度小于775px时,.events将再次显示。在移动视图上就是这种情况。删除或注释掉它,它应该可以工作。
@media only screen and (max-width: 775px){
.events{
display: block;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。