Home > Blockchain >  Issue regarding height of background video for Wide screens in Elementor
Issue regarding height of background video for Wide screens in Elementor

Time：09-30

Hy, hope this finds you well.

I have a query regarding a video background for wide/big screens. The thing is it is working fine for all devices in the elementor settings also in actual but for widescreen LCD, it is not showing in a complete page rather some portion of below section is also coming.

Please advise as width and height is adjusted for the widescreen option of elementor.

Before disabled plugins and changed the theme for one another issue which was related to this video.

link of website: Red section should be down so that video can be seen in full page

Appreciate if anyone know the solution, its done in elementor and on it, there is html code for buttons some images. Please see code if needed.

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">


<style type="text/css">


.hover {
  position: relative;
  display: inline-block;
}    
  
   
.hover:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 1;
  width: max-content;
  background-color:;
  color: #ffff;
  justify-content: left;
  transition: opacity 1s pop-up;
  transition-delay: 0.5s;
  display:inline-block;
  width: 30em;
  line-height: 1.2;
  font-size:25px;

  position: absolute;
  z-index: 1;
  left: -30px;
  top: -350px;
}

.hover:hover:before {
  opacity: 1;
  visibility: visible;
display: inline-block;
}
  
  
  .hover1 {
  position: relative;
  display: inline-block;
 
}    
  
   
.hover1:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 1;
  width: max-content;
  background-color:;
  color: #ffff;
  justify-content: left;
  transition: opacity 1s pop-up;
  transition-delay: 0.5s;
  display:inline-block;
  width: 30em;
  line-height: 1.2;
  font-size:25px;

  position: absolute;
  z-index: 1;
  left: -545px;
  top: -350px;
}

.hover1:hover:before {
  opacity: 1;
  visibility: visible;
display: inline-block;
}    


   .hover2 {
  position: relative;
  display: inline-block;
 
} 


.hover2:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 1;
  width: max-content;
  background-color:;
  color: #ffff;
  justify-content: left;
  transition: opacity 1s pop-up;
  transition-delay: 0.5s;
  display:inline-block;
  width: 30em;
  line-height: 1.2;
  font-size:25px;

  position: absolute;
  z-index: 1;
  left:-1060px;
  top: -350px;
}

.hover2:hover:before {
  opacity: 1;
  visibility: visible;
display: inline-block;
}    
    
.image{
   
  height: 800px;
  width:  100%;
 display:flex;
  justify-content: space-evenly;
    align-items: center;
     font-weight: normal;
    font-family:;
     color: #cccccc;
      font-size:28px;
    text-decoration: none;
   //display: grid;
  place-content:center;
  //justify-content:center;
    background-size: cover;
  background-position: center;

}


.training{
    
    padding-top: 550px;
  padding-right:470px;
  padding-left: 20px;


}
  .shop{
     padding-top: 550px;
     padding-left: 40px; 
  }
  
  .services{
      padding-top: 550px;
      padding-right:500px;
  }

 
.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;
}
}






@media only screen and (max-width:2400px) and (min-width:1199px) {
 
    
.image{
  
  height: 800px;
  width:  100%;
 display:flex;
  justify-content: space-evenly;
    align-items: center;
     font-weight: normal;
    font-family:;
     color: #cccccc;
      font-size:28px;
    text-decoration: none;
   //display: grid;
  place-content:center;
  //justify-content:center;
    background-size: cover;
  background-position: center;

}


.training{
    

  padding-top: 500px;
  padding-right:420px;
  padding-left: 20px;


}
  .shop{
      min-width:10px;
     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;
}
}







@media only screen and (max-width:1366px) and (min-width:1170px) {
    
 

.hover {
  position: relative;
  display: inline-block;
 
}    
  
   
.hover:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 1;
  width: max-content;
  background-color:;
  color: #ffff;
  justify-content: left;
  transition: opacity 1s pop-up;
  transition-delay: 0.5s;
  display:inline-block;
  width: 30em;
  line-height: 1.2;
  font-size:25px;

  position: absolute;
  z-index: 1;
  left: -80px;
  top: -350px;
}

.hover:hover:before {
  opacity: 1;
  visibility: visible;
display: inline-block;
}
    
    
.hover1 {
  position: relative;
  display: inline-block;
 
}    
  
   
.hover1:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 1;
  width: max-content;
  background-color:;
  color: #ffff;
  justify-content: left;
  transition: opacity 1s pop-up;
  transition-delay: 0.5s;
  display:inline-block;
  width: 30em;
  line-height: 1.2;
  font-size:25px;

  position: absolute;
  z-index: 1;
  left: -545px;
  top: -350px;
}

.hover1:hover:before {
  opacity: 1;
  visibility: visible;
display: inline-block;
}    
    


.hover2 {
  position: relative;
  display: inline-block;
 
} 


.hover2:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 1;
  width: max-content;
  background-color:;
  color: #ffff;
  justify-content: left;
  transition: opacity 1s pop-up;
  transition-delay: 0.5s;
  display:inline-block;
  width: 30em;
  line-height: 1.2;
  font-size:25px;

  position: absolute;
  z-index: 1;
  left: -1000px;
  top: -350px;
}

.hover2:hover:before {
  opacity: 1;
  visibility: visible;
display: inline-block;
}    
    
    
    
    
.image{
   
  height: 800px;
  width:  100%;
 display:flex;
  justify-content: space-evenly;
    align-items: center;
     font-weight: normal;
    font-family:;
     color: #cccc;
      font-size:28px;
    text-decoration: none;
   //display: grid;
  place-content:center;
  //justify-content:center;
    background-size: cover;
  background-position: center;

}

.training{
    
  padding-top: 500px;
  padding-right:410px;
  padding-left: 65px;


}
  .shop{
     padding-top: 500px;
     padding-right:65px; 
  }
 
   .services{
      padding-top: 500px;
      padding-right:400px;
      padding-left: 0px;
  }

 
.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;
  display: inline-block;
}

}











@media only screen and (max-width:1200px) and (min-width:1000px) {
 .image{
   
  height: 800px;
  width:  100%;
 display:flex;
  justify-content: space-evenly;
    align-items: center;
     font-weight: normal;
    font-family:;
     color: #cccc;
      font-size:28px;
    text-decoration: none;
   //display: grid;
  place-content:center;
  //justify-content:center;
    background-size: cover;
  background-position: center;

}

.training{
    
  padding-top:   500px;
  padding-right: 350px;
  padding-left:  160px;


}
  .shop{
     padding-top: 500px;
     padding-left: 35px; 
  }
 
   .services{
      padding-top: 500px;
      padding-right:220px;
  }

 
.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;
}

}






@media only screen and (max-width:1024px) and (min-width:768px) {
    
    .image{
   
  height: 800px;
  width:  100%;
 display:flex;
  justify-content: space-evenly;
    align-items: center;
     font-weight: normal;
    font-family:;
     color: #cccccc;
      font-size:28px;
    text-decoration: none;
   //display: grid;
  place-content:center;
  //justify-content:center;
    background-size: cover;
  background-position: center;

}

.training{
    
    padding-top: 500px;
  padding-right:260px;
  padding-left: 105px;


}
  .shop{
     padding-top: 500px;
     padding-left: 40px; 
     padding-right:130px;
  } 
    
    
       .services{
      padding-top: 500px;
      padding-right:200px;
      padding-left: 62px;
  }

 
.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;
}

}
    
    @media only screen and (max-width:767px) {
    
      
    .image{
   
  height: 800px;
  width:  100%;
 display:flex;
  justify-content: space-evenly;
    align-items: center;
     font-weight: normal;
    font-family:;
     color: #cccccc;
      font-size:25px;
    text-decoration: none;
   //display: grid;
  place-content:center;
  //justify-content:center;
    background-size: cover;
  background-position: center;

}

.training{
    
    padding-top: 500px;
  padding-right:120px;
  padding-left: 0px;


}
  .shop{
     padding-top: 500px;
     padding-left: 20px; 
     padding-right:05px;
  } 
    
    
       .services{
      padding-top: 500px;
      padding-right:130px;
      padding-left:0px;
      margin: 0px;
  }
  
.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>



</head>

<body>
    




<div >
   
    
    <div >
        
      <span  data-hover="We provide different services including  Inspection, Fabric Maintenance & Installation, Mechanical, Access Solutions and Design & Installation "
      
        onclick="window.location='https://beta.edgerope.com/services'">Services</span>
 
    <img src="http://beta.edgerope.com/wp-content/uploads/2022/08/2-1120x800.jpg"> 
   
    </div>
    
  
  
  
    
  <div >
      
      <div>

</div>
       <span  data-hover="We provide IRATA and SPRAT Training"  onclick="window.location='beta.edgerope.com/courses'">Training</span>

    
    <img src="http://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
    
    
    
    
  <div >
      
     <span  data-hover="We are selling different rope access products through Salla Platform" onclick="window.location='beta.edgerope.com/shop'">Shop</span>
     
     
     
    <img src="http://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
</div>

</body>
</html>

CodePudding user response：

Use media query like this:

@media screen and (max-aspect-ratio: 16/9) {
    
  }

Page link：https//www.codepudding.com/Blockchain/560227.html

Prev:admin-ajax.php 400 error when filtering blog posts
Next:TypeScript - declare type of a React component class constructor with a certain static method
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding