Me acaban de dar para realizar la siguiente página web. Ahora yo realice la página y tengo tres errores, notables, quizás hay mas pero no me doy cuenta
Acá les dejo el link de mi página hasta el momento:
Los tres problemas que tengo, son:
- Simulando viendo desde una pantalla grande la imagen de arriba no se ve responsive, se ve mal.
- Simulando viendo desde pantalla de un celular las dos imágenes se ven mal.
- Simulando viendo desde pantalla de un celular la imagen del footer, no se centra.
Aca les dejo el código Html donde ubico las tres imágenes, de arriba.
<header class="doble">
<div class="site-header"></div>
<div class="site-mobile"></div>
</header>
Y aca les dejo todo lo relacionado a dichas clases en lo que es el css, "doble", "site-header" y "site-mobile".
.site-header{
background-position: center center;
background-size: cover;
min-height: 80rem;
max-width: 100%;
height: auto;}
.site-mobile{
background-position: center center;
background-size: cover;
max-width: 100%;
height: auto;}
@media (max-width: 768px) {
.site-header{
background-image: url(../img/logo\ [email protected]);
}
.site-mobile{
background-image: url(../img/logo2.png);
min-height: 60rem;}
}
@media (min-width: 768px) {
.site-header{
background-image: url(../img/logocompleto.png);
max-width: 100%;}
}
Aclaro, que la clase "doble" no la utilicé, la cree pensando usar desde ahi pero si no ignorenla.
Y aca les dejo el HTML de la parte del footer
<footer class="site-footer contenedor">
<div>
<img class="imagen imagen-footer" src="img/logos cc hair pro.png" alt="">
</div>
<div class="cr">
<p>Importa, distribuye y comercializa en forma exclusiva en todo el territorio de la República Argentina.</p>
<p>General Alvear 280 - Córdoba (5000) - Pcia. Córdoba - Argentina.
</p>
</div>
</footer>
Y el CSS de la parte del footer:
@media (min-width: 768px) {
.imagen-footer{
float: right;
}
.site-footer{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 2rem;
margin-top: 16.6rem;
justify-content: space-between;
}
}
@media (max-width: 768px) {
.site-footer{
margin-top: 7.5rem;
}
.cr p{
text-align: center;
}
.imagen-footer{
display: inline-block;
justify-content: center;
}
}
.cr p{
display: block;
margin-block-start: 0!important;
width: 41.8rem;
}
Les agrego el contenedor de la parte del CSS aunque creo que es innecesario:
.contenedor {
width: 95%;
max-width: 120rem; /** = 1200px **/
margin: 0 auto;
}
Utilice HTML y CSS en los 'site-header' y 'site-mobile', porque desconozco como usar JavaScript u otra solucion, tengo entendido que hubiera sido mas facil con JS pero no lo se usar.