Despite successful functionality on my desktop, the issue arises when viewing the website on my phone as the overflow-x: hidden property does not work.
To view the website in question, visit ryanjthacker.com. Additionally, you can access the complete code files on GitHub.
<header id="welcome-section">
<div>
<p id="hello">Hello, my name is</p>
<h1 id="ryan">Ryan Thacker</h1>
<a href="#section-a" class="button">Learn More</a>
</div>
<video autoplay muted loop id="bgVideo">
<source src="images/Beach.webm" type="video/mp4">
</video>
</header>
body {
font-family: "Montserrat", sans-serif;
overflow-x: hidden
}
#welcome-section {
box-sizing: border-box;
width: 100%;
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 20px;
text-align: center;
color: white;
font-family: "Montserrat", sans-serif;
}
#bgVideo {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1;
}
@media only screen and (max-width: 768px) {
#bgVideo {
min-width: 50%;
height: 50%;
}
}