Solucionado
Tengo una duda, al momento de querer colocar el formato movil a mi página web, no se por que, pero el color que le he asignado al <header> solo abarca la mitad de la sección y no se a que se debe. De hecho, al <header> el color de fondo se lo he aplicado a toda la sección como tal. Les coloco captura de a que me refiero. De antemano, muchas gracias!
En formato normal, mi página se ve de la siguiente forma:
Hola, es como que tu header tuviera definido un height. Por favor sube tu codigo así lo revisamos
Saludos
Este es el código de mi index:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Barbería Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="caja">
<h1><img id="logo" src="imagenes/logo.png"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<img class="banner" src="banner1.jpeg">
<main>
<section class="principal">
<h2 class="título-principal">Acerca de la Barbería Alura</h2>
<img class="utensilios" src="imagenes/utensilios[1].jpg" alt="utensilios de la barbería">
<p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> finalmente ha llegado a la capital, trayendo consigo al mercado lo mejor que hay para su cabello y barba. Fundada en 2005, la <strong>Barbería Alura</strong> ya es una insigina en cuento al cuidado del cabello, contando con la experiencia durante años en el cuidado masculino del cual nuestros clientes son testigos, conquistando de esta forma nuevos clientes diariamente.</p>
<p id="mision"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a nuestros clientes"</strong>.</em></p>
<p>Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el mundo de la moda, para así ofrecer a nuestros clientes las últimas tendencias. La atención hacia nuestro publico posee un padrón de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes, generando con esto la innovación y excelencia que nuestro clientes bucan en el día a día.</p>
</section>
<section class="mapa">
<h3 class="título-principal">Nuestra Ubicación</h3>
<p>Nuestra Barbería esta ubicada en el centro de la ciudad</p>
<div class="mapa-contenido">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d42576.3410784619!2d-84.18937930669578!3d9.945029661748617!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8fa0fba83fcce847%3A0xc1ec5c1f6638df7a!2sAlura%20Center!5e0!3m2!1ses-419!2ssv!4v1673309143147!5m2!1ses-419!2ssv" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>
<section class="diferenciales">
<h3 class="título-principal">Lo que nos diferencia</h3>
<div class="contenido-diferenciales">
<ul class="lista-diferenciales">
<li class="items">Atención personalizada a nuestro clientes</li>
<li class="items">Amplio Espacio</li>
<li class="items">Excelente ubicación</li>
<li class="items">Profesionales calificados</li>
<li class="items">Barbería con Aire acondicionado</li>
<li class="items">Precios accesibles</li>
<li class="items">Puntualidad y limpieza</li>
</ul> <img class="imagen-diferenciales" src="diferenciales/diferenciales.jpg">
</div>
<div class="video">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<p class="slogan">Somos lo mejor que le puede pasar a tu cabello</p>
<p class="frase">Visitanos y descubrelo</p>
</section>
</main>
<footer>
<img src="imagenes/logo-blanco.png">
<p class="derechos">© Copyright Barbería Alura - 2023</p>
</footer>
</body>
</html>
Perfecto, por favor me subes tu css, allí veremos los estilos definidos
Lo subiré por partes por que es extenso. En esta parte subo la codificación de la página CONTACTO y el de PRODUCTOS.
/* Se aplicara el siguiente tipo de letra al body, es decir a toda la pagina */
body{
font-family: 'Montserrat', sans-serif;
}
.contact{
font-family: 'Montserrat', sans-serif;
font-weight: bold;
}
/*CSS para nuestra página de Productos*/
header{
background-color: cadetblue;
}
#logo{
width: 10%;
}
.caja{
width: 940px;
position: relative;
margin: 0 auto;
}
nav{
position: absolute;
top: 52.5px;
right: 0;
}
nav li{
display: inline-block;
margin: 0 0 0 15px;
}
nav a{
text-transform: uppercase;
color: black;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover{
color: #98de16;
text-shadow: 2px 2px 5px black;
}
.productos{
width: 940px;
margin: 0 auto;
padding: 50px;
}
.productos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid black;
border-radius: 15px;
}
.productos li:hover{
border-color: #98de16;
}
.productos li:hover h2{
font-size: 28px;
}
.productos li:hover .productos-precio{
font-size: 22px;
}
.productos li:active{
border-color: blueviolet;
}
.productos h2{
font-size: 25px;
font-weight: bold;
}
.productos-descripcion{
font-size: 15px;
}
.productos-precio{
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}
footer{
text-align: center;
background: url(imagenes/bg.jpg);
padding-bottom: 20px;
}
.derechos{
color: white;
font-size: 13px;
margin: 20px;
}
/*CSS para nuestra página de Contacto*/
.pag-contact{
width: 940px;
margin: 0 auto;
}
textarea{
resize: vertical;
font-family: 'Montserrat', sans-serif;
}
form{
margin: 40px 0;
}
form label, form p, form legend{
display: block;
font-size: 16px;
margin: 0 0 10px;
}
#mensaje{
margin-bottom: 0;
}
#maxcaracteres{
margin-top: 0;
margin: 0 0 1% 33.3%;
font-size: 14px;
color: darkred;
}
#horario{
margin-top: 0;
margin: 0 0 1% 27.5%;
font-size: 14px;
color: darkred;
}
.input-padron{
display: block;
margin: 0 0 20px;
padding: 5px 10px;
width: 50%;
}
.fecha, .checkbox{
margin: 20px 0;
}
.lista{
margin: 20px 0;
}
#seleccion_fecha{
width: 49.4%;
padding: 6px 6px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
select{
width: 51%;
padding: 6px 6px;
font-family:'Montserrat', sans-serif;
font-size: 16px;
}
.enviar{
width: 40%;
padding: 15px 0;
font-size: 18px;
font-weight: bold;
color: white;
background: orange;
border: none;
border-radius: 8px;
transition: 1s all;
cursor: pointer;
}
.enviar:hover{
background: red;
transform: scale(1.1);
}
.horario_barberia{
font-size: 18px;
font-weight: bold;
}
table{
margin: 10px 0 40px;
font-size: 18px;
font-family: 'Montserrat', sans-serif;
width: 45%;
}
thead{
background-color: #555555;
font-weight: bolder;
color: white;
font-size: 18px;
font-family: 'Montserrat', sans-serif;
}
td, th{
border: 2px solid black;
padding: 8px 15px;
}
Aqui esta la parte del código de la página de HOME:
/*CSS para nuestra página Home*/
.banner{
width: 50%;
height: auto;
padding: 10px 0;
margin-left: 25%;
}
.principal{
background: #fefefe;
width: 940px;
margin: 0 auto;
}
.título-principal{
text-align: center;
font-size: 2em;
margin: 0 0 1em;
clear: left;
font-weight: bold;
}
.principal p{
margin: 0 0 1em;
}
.principal strong{
font-weight: bold;
}
.utensilios{
width: 150px;
float: left;
margin: 30px 20px 30px 0;
box-shadow: 0 0 25px 2px black;
}
.principal p em{
font-style: italic;
margin: 0 0 0 60px;
}
.mapa{
padding: 3em 0px;
background: linear-gradient(#FEFEFE, #888888);
}
.mapa p{
margin: 0 0 2em;
text-align: center;
}
.mapa-contenido{
width: 940px;
margin: 0 auto;
}
.diferenciales{
background: #888888;
margin: 0 auto;
}
.contenido-diferenciales{
width: 940px;
margin: 0 auto;
}
.lista-diferenciales{
width: 45%;
display: inline-block;
vertical-align: top;
margin-left: 7.5%;
}
.items{
line-height: 2.0;
}
.items:before{
content: "✅";
}
.imagen-diferenciales{
width: 40%;
margin-left: 1%;
opacity: 100%; /*aqui se puede quitar, pero como ejemplo, lo dejo*/
box-shadow: 0 0 20px black;
}
.video{
width: 560px;
margin: 4em auto 1em;
opacity: 40%;
}
.video:hover{
opacity: 100%;
transition: 500ms;
box-shadow: 0 0 30px 5px black;
}
.slogan{
text-align: center;
font-family: 'Great Vibes', cursive;
line-height: 2.0;
font-size: 40px;
font-weight: bold;
text-shadow: 2px 2px 5px rgb(204, 38, 38);
}
.frase{
text-align: center;
font-family: 'Great Vibes', cursive;
font-size: 40px;
font-weight: bold;
text-shadow: 2px 2px 5px rgb(204, 38, 38);
padding-bottom: 40px;
}]Esta parte ya es para la adaptación del movil:
@media screen and (max-width: 1025px) {
#logo{
width: fit-content;
float: right;
padding: 0;
}
.banner{
width: 100%;
height: auto;
padding: 0;
margin-left: 0;
}
nav{
width: auto;
position: relative;
line-height: 50px;
}
nav li{
display: block;
margin: 0 0 0px 15px;
}
h1{
text-align: right;
}
.caja, .principal, .mapa-contenido, .contenido-diferenciales, .video{
width: auto;
}
.lista-diferenciales, .imagen-diferenciales{
width: 100%;
margin-left: 0;
}
.video{
width: auto;
margin: 4em auto 1em;
opacity: 100%;
}
.productos{
width: auto;
margin: auto;
padding: 10%;
}
.productos li{
display: inline-block;
text-align: center;
width: min-content;
vertical-align: top;
margin: 5% 2%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid black;
border-radius: 15px;
}
.productos h2, .productos-descripcion, .productos-precio {
width: auto;
}
.input-padron, .fecha, .checkbox, #maxcaracteres{
width: 80%;
margin-left: 0;
}
.input-fecha, select{
width: 80%;
margin-left: 0;
}
.fecha, .checkbox{
margin: 10px 0;
}
#seleccion_fecha{
width: 63%;
padding: 6px 6px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
select{
width: 51%;
padding: 6px 6px;
font-family:'Montserrat', sans-serif;
font-size: 16px;
}
.pag-contact{
width: auto;
margin: 2%;
padding: 7% 0;
}
#horario{
margin-top: 0;
margin: 0;
font-size: 14px;
color: darkred;
}
#maxcaracteres, #horario{
margin: 0 5% 25px 0;
}
table{
width: auto;
}
.enviar{
width: min-content;
padding: 15px 20px;
font-size: 18px;
font-weight: bold;
color: white;
background: orange;
border: none;
border-radius: 8px;
transition: 1s all;
cursor: pointer;
}
}Y MUCHAS GRACIAS POR LA AYUDA. Ya revise el código y no encuentro como solucionarlo
Hola,
El tema está en la media, al momento de usar fit-content;
#logo{
width: fit-content;
float: right;
padding: 0;
}
nav{
width: auto;
position: relative;
line-height: 50px;
}
nav li{
display: block;
margin: 0 0 0px 15px;
}solucion: dentro de la media le daría a la etiqueta caja un height del tamaño de tu logo. dado a que es una medida que entiendo no cambiara en moviles.
Además esta el tema del position relative del nav, que parece no te afecta por el momento pero que puedes manejar con el top para centrarlo
Avisame cualquier cosa
Saludos
Realizando los cambios que me mencionas, sigue mostrándose de la misma forma. Te comparto el código con los cambios que mencionas:
@media screen and (max-width: 1025px) {
#logo{
width: fit-content;
float: right;
padding: 0;
}
.banner{
width: 100%;
height: auto;
padding: 0;
margin-left: 0;
}
nav{
width: auto;
position: relative;
line-height: 50px;
}
nav li{
display: block;
margin: 0 0 0px 15px;
}
h1{
text-align: right;
}
.caja{
width: auto;
height: fit-content;
}
el height de la caja no debe ser fit content, sino la medida en pixeles del alto del logo
ese valor lo puedes sacar de las dev-tools cuando estas en tamaño celular
Sino ve probando con 250px mas o menos hasta que le des a la medida acorde
Saludos
Gracias, ya pude resolverlo.