there ho here's a CSS code, I want to hide it on PC view but visible on Phone view, I'm able to achieve my results on PC, but not on Phone, because display: none; is interfering with the code's work. Can anyone please check it?
/* --------- 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; }}