Hy, I tried to adjust the text for smaller screens by using @media screen and (min-width: 767px) but it messed up everything, I put it in the tag
Please find the code below, help is appreciated, coming fine for desktop but not for small devices.
I have this code added in HTML editor in wordpress.
Link of website: beta.edgerope.com, there is text at the start of the page, in a background video. "Services, Training and Shop"
<style>
.image{
height: 800px;
width: 100%;
display:flex;
justify-content: space-evenly;
align-items: center;
font-family: Times New Roman;
//display: grid;
place-content:center;
justify-content:middle;
color: white;
font-size:30px;
background-color: #;
background-size: cover;
background-position: center;
}
.training{
padding-top: 500px;
padding-right:430px;
padding-left: 20px;
}
.shop{
padding-top: 500px;
padding-left: 50px;
}
.services{
padding-top: 500px;
padding-right:450px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
//cursor: pointer;
display: inline-block;
}
</style>
<div class="image">
<div class="services">
<span onclick="window.location=''">Services</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ">
</div>
<div class="training">
<span onclick="window.location='beta.edgerope.com/courses'">Training</span>
<img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
<div class="shop">
<span onclick="window.location='beta.edgerope.com/shop'">Shop</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>