Дисплей: не правильно работать на мобильных устройствах ⇐ Html

[Anonymous]

Здесь есть код CSS , я хочу скрыть его в представлении ПК, но видимый в представлении телефона, я могу достичь своих результатов на ПК, но не по телефону, потому что дисплей: нет; вмешивается в работу кода. Кто -нибудь может проверить это? < /P>
/* --------- 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, 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, 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;
}
}


Подробнее здесь: https://stackoverflow.com/questions/643 ... -on-mobile