1

Tengo dos problemas con este fondo de vídeo para un sitio web. El primero es que la capa de la clase .content sobrepasa el fondo dejando una linea gris entre cada section, se puede notar a simple vista y el segundo problema es que al ver el sitio en un móvil, las letras quedan por debajo del menú y no se como arreglarlo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Prueba</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
.page-section {padding: 6rem 0;}
.team-member img {border: 7px solid rgba(0,0,0,.1); width: 225px;}
.social-buttons li a {font-size: 26px;}

#mainNav.navbar-shrink {padding-top: 0; padding-bottom: 0; background-color: rgb(0,0,0, 0.8);}
#mainNav {
background-color: rgb(0,0,0, 0.7);
padding-top: 20px;
padding-bottom: 20px;
transition: padding-top .3s,padding-bottom .3s;
border: none;
}

.bg-primary-af {background-color: #93b0cf;}
.bg-light-af {background-color: #597db4;}
.bg-light-af a {color: #fff;}
.bg-light-af-c {background-color: #a8c6df;}

.btn-whatsapp {
display:block;
position: fixed;
right:20px;
bottom:20px;
border-radius:50%;
line-height:80px;
text-align:center;
z-index:999;
}

#hero {position: relative;}
#hero video {
background-position: absolute;
z-index: 10;
/*height: 100vh;*/
width: 100%;
object-fit: cover;
}
#hero .content {
background-color: rgba(0,0,0,0.5);
height: 100%;
width: 100%;
z-index: 20;
position: absolute;
top: 0;
left: 0;
}

.navbar-dark .navbar-toggler {border: none; !important}
</style>
</head>
<body>
<nav id="mainNav" class="navbar fixed-top navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="#"><img class="rounded" src="http://lorempixel.com/40/40"> <!--span class="ml-3">AN&Eacute;CDOTAS FINANCIERAS</span--></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<!--li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li-->
<li class="nav-item"><a class="nav-link" href="#podcast">Podcast</a></li>
<li class="nav-item"><a class="nav-link" href="#nosotros">Nosotros</a></li>
<li class="nav-item"><a class="nav-link" href="#contactos">Contactos</a></li>
</ul>
</div>
</div>
</nav>


<div id="hero">
<video loop muted autoplay poster="">
<source src="https://qodde.com.ar/video/video.mp4" type="video/mp4">
</video>
<div class="content d-flex align-items-center" style="text-transform: uppercase;">
<div class="container text-center text-white">
<h1>PRUEBA DE TEXTO UNO</h1>
<h4>texto de relleno y descripci&oacute;n</h4>
</div>
</div>
</div>

<section class="bg-primary-af text-center page-section text-white">
<div class="container">
<h2 class="p-5">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</h2>
</div>
</div>
</section>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="agency.min.js"></script>
</body>
</html>

Dejo un imagen para que se pueda ver el error:

introducir la descripción de la imagen aquí

1 respuesta 1

1

El problema del espacio es que estás tomando medidas distintas para la altura del video y el content que le sigue ya que a uno le estás asignando 100% y a otro 100vh. Ponle a los dos la misma proporción, en este caso he puesto a los dos 100vh. Aplicaselo también al contenedor #hero.

Por otro lado, he intentado ver si las letras se te ponían por defecto en versión móvil debajo del menú como muestras en la imagen pero he visto que se situaban bien así que entiendo que lo que no quieres es que se te vean debajo del menú cuando desplazas la página hacia arriba. Esto se debe a que le estás aplicando una opacidad con la propiedad background-color (aunque para aplicarle opacidad con un rgb no se llamaría a la función rgb si no rgba). En tu caso, con quitar el 0.7 de opacidad en el background-color de tu #mainNav sería suficiente.

Por último, fíjate que justo antes del cierre de la sección te sobra el cierre de un div.

...
</div>
</div> <!-- sobra -->
</section>
...

Tu ejemplo corregido:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Prueba</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
.page-section {padding: 6rem 0;}
.team-member img {border: 7px solid rgba(0,0,0,.1); width: 225px;}
.social-buttons li a {font-size: 26px;}

#mainNav.navbar-shrink {padding-top: 0; padding-bottom: 0; background-color: rgb(0,0,0, 0.8);}
#mainNav {
background-color: rgb(0,0,0);
padding-top: 20px;
padding-bottom: 20px;
transition: padding-top .3s,padding-bottom .3s;
border: none;
}

.bg-primary-af {background-color: #93b0cf;}
.bg-light-af {background-color: #597db4;}
.bg-light-af a {color: #fff;}
.bg-light-af-c {background-color: #a8c6df;}

.btn-whatsapp {
display:block;
position: fixed;
right:20px;
bottom:20px;
border-radius:50%;
line-height:80px;
text-align:center;
z-index:999;
}

#hero {
position: relative;
height: 100vh;
}
#hero video {
background-position: absolute;
z-index: 10;
height: 100vh;
width: 100%;
object-fit: cover;
}
#hero .content {
background-color: rgba(0,0,0,0.5);
height: 100vh;
width: 100%;
z-index: 20;
position: absolute;
top: 0;
left: 0;
}

.navbar-dark .navbar-toggler {border: none; !important}
</style>
</head>
<body>
<nav id="mainNav" class="navbar fixed-top navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="#"><img class="rounded" src="http://lorempixel.com/40/40"> <!--span class="ml-3">AN&Eacute;CDOTAS FINANCIERAS</span--></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<!--li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li-->
<li class="nav-item"><a class="nav-link" href="#podcast">Podcast</a></li>
<li class="nav-item"><a class="nav-link" href="#nosotros">Nosotros</a></li>
<li class="nav-item"><a class="nav-link" href="#contactos">Contactos</a></li>
</ul>
</div>
</div>
</nav>


<div id="hero">
<video loop muted autoplay poster="">
<source src="https://qodde.com.ar/video/video.mp4" type="video/mp4">
</video>
<div class="content d-flex align-items-center" style="text-transform: uppercase;">
<div class="container text-center text-white">
<h1>PRUEBA DE TEXTO UNO</h1>
<h4>texto de relleno y descripci&oacute;n</h4>
</div>
</div>
</div>

<section class="bg-primary-af text-center page-section text-white">
<div class="container">
<h2 class="p-5">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</h2>
</div>
</section>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="agency.min.js"></script>
</body>
</html>

1
  • Hice todas la correcciones del css y los divs que estaban sueltos y quedo perfecto. Muchas gracias Francisco!
    – user101604
    Commented el 14 nov. 2019 a las 2:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.