Un gran saludo a toda la comunidad:
Apenas iniciándome con Bootstrap, estoy haciendo un sitio web, pero me doy cuenta que la visualización del sitio web no es la más apropiada en versión sm, en versión de escritorio bien, pero cuando reduzco la ventana se desacomoda, tenia una idea inicial y era estas tres secciones hacerlas parrallax, pese a la complejidad, decide dejarlo estática, pero desacomoda << Anexo una imagen para hacerme entender mejor de lo que me sucede y el código>>
Muchas gracias por ayudarme a encontrar mi error.
.logo {
}
@media (max-width: 575px) {
.logo {
width: 50%;
}
}
/*HEADER*/
header a img:hover {
opacity: 0.3;
filter: alpha(opacity=30)
}
/*MENU*/
.navbar {
margin-bottom: 0;
background-color: #1A1A1A;
border: 0;
font-size: 14px !important;
border-radius: 0;
font-family: 'Open Sans', sans-serif;
justify-content: space-between;
align-items: center;
position: relative;
display: flex;
flex-wrap: wrap
padding: .10rem 1rem;
}
.navbar li a, .navbar .navbar-brand {
color: #B3B3B3 !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #FFF !important;
background-color: #ED1E79 !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
.navbar-nav > li > a, .navbar-brand {
padding-top:5px !important; padding-bottom:5px !important;
height: 35px; /* aqui escoges el alto que necesites */
margin-left: 50px;
margin-right: 50px;
}
.navbar {
min-height:32px !important; /* aqui escoges el alto que necesites */
}
/*FOOTER*/
footer {
background-color:#1A1A1A;
height: 50%;
color: white;
padding: 15px;
}
.main1 {
display:flex;
margin:0 auto;
}
footer img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
footer img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
@media (min-width: 1200px) {
.custom-text1 {
text-align: left;
}
}
@media (max-width: 1199px) {
.custom-text1 {
text-align: center;
}
}
@media (min-width: 1200px) {
.custom-text {
text-align: right;
}
}
@media (max-width: 1199px) {
.custom-text {
text-align: center;
}
}
/*TEXTO*/
h1 {
font-family: 'Open Sans 300', sans-serif;
font-size: 25px;
}
h2 {
font-family: 'Open Sans 400', sans-serif;
font-size: 25px;
}
h3 {
font-family: 'Open Sans 700', sans-serif;
font-size: 25px;
}
h4 {
font-family: 'Open Sans Condensed 300', sans-serif;
font-size: 18px;
line-height: 1.42857143 !important;
}
h6{
line-height: 1.42857143 !important;
}
.novedades {
margin-top: 60px;
margin-bottom:60px;
}
/* PARALLAX */
.nosotros{
background: no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
height: 600px;
}
.texto-nosotros {
margin-top: 200px;
}
.caja-nosotros {
width: 100%;
height:inherit;
padding: 50px;
border: 1px solid black;
box-sizing: border-box;
}
/*TRABAJO*/
.equipo-trabajo {
margin-top: 100px;
margin-bottom: 100px;
}
.servicios {
margin-top: 100px;
margin-bottom: 100px;
}
.tabla-servicios {
margin-bottom: 100px;
}
/*CONTACTO*/
.formulario {
margin-top: 100px;
margin-bottom: 100px;
}
.input-border {
border-color: #ED1E79 ;
}
.boton-enviar {
margin-top: 50px;
}
.donde-estamos{
margin-top: 150px;
margin-bottom: 200px;
}
.caja{
font-family: 'Open Sans Condensed', sans-serif;
font-size: 20px;
font-weight: 400;
width:400px;
border: 1px solid #000;
padding: 20px;
justify-content: center;
}
#redes a img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="imagenes/favicon.png" type="image/x-icon">
<title>Nosostros</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- HEADER -->
<header>
<div class="container">
<a href="index.html">
<img class="center-block logo" src="imagenes/Logo.png">
</a>
</div>
</header>
<!-- MENU -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index.html">INICIO</a></li>
<li><a href="nosotros.html">NOSOTROS</a></li>
<li><a href="servicios.html">SERVICIOS</a></li>
<li><a href="contacto.html">CONTACTO</a></li>
</ul>
</div>
</div>
</nav>
<!--VIDEO NOSOTROS-->
<div class="row">
<div class="container-fluid">
<video controls poster="imagenes/v-nosotros.jpg" src="Videos/v_nosotros.mp4"/>Your browser does not support the video tag.</video>
</div>
</div>
<!--SECCIÓN ACERCA DE NOSOTROS-->
<div class="row">
<div class="nosotros hidden-xs" style="background-image: url(imagenes/parallax.png); background-size: 100%;">
<div class="col-md-8 col-md-offset-2">
<div class="texto-nosotros">
<h1 class="text-center"><b>ACERCA DE</b> “JOSÉ MIGUEL, ARTE Y BELLEZA”</h1><br>
<div class="caja-nosotros">
<p>Durante más de 15 años de profesionalismo, experiencia y servicios, José Miguel Sanchez Gonzalez, tenia la
... la que se ofrecen productos y servicios de gran calidad a precios apropiados.</p>
</div>
</div>
</div>
</div>
</div>
<!-- EQUIPO DE TRABAJO -->
<div class="container">
<div class="equipo-trabajo">
<div class="row">
<h1 class="text-center"><b>EQUIPO</b> DE TRABAJO</h1><br><br>
<div class="col-md-2"></div>
<div class="col-sm-3 "><img class="img-responsive center-block" src="imagenes/normal/josemiguel.png"><br><br><h4 style="text-align:center"><b>José Miguel</b></br>Estilista Integral</h4></div>
<div class="col-sm-3"><img class="img-responsive center-block" src="imagenes/normal/luciajaimes.png"><br><br><h4 style="text-align:center"><b>Lucia Jaimes</b></br>Estilista Integral</h4></div>
<div class="col-sm-3 "><img class="img-responsive center-block" src="imagenes/normal/nataliatorres.png"><br><br><h4 style="text-align:center"><b>Natalia Torres</b></br>Estilista Integral</h4></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 custom-text1 col-lg-6">
<h6 class="text-muted lead">CONTACTO:</h6>
<h6 class="text-muted">
Carrera 8h No. 166-71 Local 2<br>
Santa Cruz de la Ronda.<br>
Teléfonos: 3115988953 – 3112641818.<br>
</h6>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 custom-text col-lg-6">
<h6 class="text-muted lead">ENCUENTRANOS EN LAS REDES</h6>
<div class="redes-footer">
<a href="https://www.facebook.com/"><img src="imagenes/facebook-2.png"></a>
<a href="https://twitter.com/"><img src="imagenes/twitter-2.png"></a>
<a href="https://www.youtube.com/"><img src="imagenes/youtube-2.png"></a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 custom-text col-lg-12">
<p class="text-muted small">José Miguel, arte y belleza @2016.<br> Todos los derechos reservados.</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
css
y sin el inspector es difícil, la mejor herramienta paracss
es el inspector de elementos de tu navegador.