Question

我有这个网站并且它有效但是如果我调整大小，底部的徽标和按钮出错并且所有响应都丢失了，我该如何修复它

请指导，这是网址：

我的代码用法就像这样

＆＃13;

.container {
  position:absolute;
  top:0;
  left:0;
  width:100%; 
}
.container video {
  position:relative;
  z-index:0;
}
.overlay {
  position:absolute;
  top:0;
  left:6%;
  z-index:1;
}
.box {
  position:relative;
}
.bet_time {
  position:absolute;
  bottom:0;
  right:6%;
  color:#fff;
  text-transform:uppercase;
}
.btn {
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  color: #000000;
  font-size: 20px;
  background: #dbdbdb;
  padding: 10px 10px 10px 10px;
  border: solid #dbdbdb 2px;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

＆＃13;

<head>
<title>Prolex Media</title>
</head>
<body >
<div class="container">
  <video autoplay id="videos" width="100%" height="100%" muted>
    <source src="live/ProlexCommercial.webm" type='video/webm'/>
  </video>
    <div class="overlay">
        <p><img src="images/logoservices.jpg"/></p>
    </div>
  <div class="box">
    <p class="bet_time"><a class="btn" href="home.cfm">Skip</a></p>
  </div>
</div>
</body>

＆＃13;

我不确定我错过了什么

Answer 1

尝试使用css中的代码从html删除css属性

video {
    max-width: 100%;
    height: auto;
}

Answer 2

.overlay {
  left: 15px;
  position: absolute;
  top: 15px;
  z-index: 1;
}
.overlay img {
  opacity: 0.5;
  width: 100px;
}
.btn {
  border: 2px solid #ddd;
  border-radius: 5px;
  color: #fff;
  font-size: 15px;
  margin: 0 5px 10px;
  padding: 5px;
  text-decoration: none;
}
.container{ padding:0;}

Answer 3

此问题出现在您的媒体查询中（您尚未在此处分享）.container具有padding，如下所示

@media only screen and (max-width: 767px)
.container {
    width: 100%;
    padding: 0 15px;
}

这导致了这个问题。

您希望将padding: 0设置为.container
或者您认为相应地对齐.overlay和.bet_time。如果您希望.overlay上有left: 15px，请设置.bet_time right: 15px和padding .container。

网站页面的问题，视频无响应

3 个答案: