Mobile view not working

Technical Q&A
1

Hi, this is my code that was generated by chatgpt.

/* General Styles */ body { margin: 0; padding: 0; overflow: hidden; /* Prevent scrolling */ background-color: black; cursor: url('[https://cdn.shopify.com/s/files/1/0734/1175/6250/files/Cursor_new?v=1733089751](https://cdn.shopify.com/s/files/1/0734/1175/6250/files/Cursor_new?v=1733089751)') 80 80, auto; }

#intro-container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
overflow: hidden;
}

video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}

.center-image {
position: relative;
z-index: 2;
max-width: 500px;
width: auto;
}

.enter-link {
position: relative;
z-index: 2;
margin-top: 20px;
font-family: ‘Arial’, sans-serif;
font-size: 28px;
text-decoration: none;
color: white;
background: none;
border: 2px solid white;
padding: 10px 20px;
cursor: pointer;
transition: all 0.3s ease;
animation: flash 1.5s infinite; /* Flash animation added */
}

.enter-link:hover {
background-color: white;
color: black;
}

@keyframes flash {
0%, 100% {
opacity: 1; /* Fully visible /
}
50% {
opacity: 0.5; / Dimmer */
}
}

preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}

preloader img {
max-width: 200px;
width: auto;
}

.fade-out {
animation: fadeOut 1s forwards;
}

.fade-in {
animation: fadeIn 1.5s forwards;
}

@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
.center-image {
max-width: 300px;
}

.enter-link {
font-size: 20px;
padding: 8px 16px;
}
}

@media screen and (max-width: 480px) {
.center-image {
max-width: 200px;
}

.enter-link {
font-size: 18px;
padding: 6px 12px;
}
}

Logo or Image

ENTER

Preloader

The code works fine on laptop and computer but doesn’t work on mobile and the video doesn’t load instead it just displays an image. Could anyone help me troubleshoot this?