0

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

Actividad

Acá les dejo el link de mi página hasta el momento:

Página prueba

Los tres problemas que tengo, son:

  1. Simulando viendo desde una pantalla grande la imagen de arriba no se ve responsive, se ve mal.
  2. Simulando viendo desde pantalla de un celular las dos imágenes se ven mal.
  3. 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.

1
  • En ves de colocar dentro de una cabecera la imagen, prueba el colocarlo en un DIV posterior a ello utiliza el IMG con las clases tipo: width:100% para ajustar según el ancho del dispositivo.
    – Cliente32
    Commented el 10 jul. 2019 a las 16:22

2 respuestas 2

1

Espero que esto te sirva :)

Para el punto 1 y 2 deberias agregar a las imagenes el tamañano de la img al 100%, seria agregar background-size (tamaño de la img) y background-repeat (para que la imagen no se repita) ejemplo:

    .site-header {
background-image: url(../img/logo\ [email protected]);
background-size: 100%;
background-repeat: no-repeat;
}

de esta forma las imagenes se adaptar a cualquier ancho y es responsive.

Para el punto 3 deberias agregar text-align: center al div que contiene la imagen.

Otra cosa que vi por si te sirve le deberias sacer el ancho fijo a los textos para que no se te corten en mobile y que estos se ajusten al ancho, ejemplo en el footer:

    .cr p {
display: block;
margin-block-start: 0!important;
width: 41.8rem; // esto lo deberias sacar en mobile ya que si lo dejas no te va 
 a centrar el texto
}

Saludos!

1
  • Muchas gracias Romina! Me sirvió!
    – FerAvila
    Commented el 11 jul. 2019 a las 1:40
0

DESKTOP

En primer lugar, yo no pondría la imagen de cabecera como fondo de un div, ya que de esta forma es más dificil ajustarla para que sea responsive; por un lado tienes que ajustar la imagen de fondo y por otra el alto del contenedor, estando obligado a definir un alto fijo, ya que el contenedor tiene fondo pero no contenido.

Si utilizas la etiqueta img te será mucho más sencillo.

MOBILE

Si lo haces igual que con desktop, utilizando etiquetas img en vez de definir backgrounds en un bloque div, te será mucho más sencillo adaptarlas.

FOOTER MOBILE

Para que el footer aparezca centrado, tienes que asignarle el código que lo centre al contenedor en el que está alojada la imagen del footer y no a la misma imagen. De esta forma, añadiendo "text-align: center;" al div que contiene la img del footer, esta se centrará.

3
  • "Si utilizas la etiqueta img te será mucho más sencillo." Habia probado de esa forma, utilizando IMG pero no se como hacer para que aparezca la imagen completa cuando este desde una CPU y desaparezca, cuando este desde un celular y aparezcan las otras dos imágenes.
    – FerAvila
    Commented el 10 jul. 2019 a las 17:06
  • Lo del FOOTER MOBILE me sirvió.
    – FerAvila
    Commented el 10 jul. 2019 a las 17:12
  • Muchas gracias Daniel, fue muy útil tu respuesta.
    – FerAvila
    Commented el 11 jul. 2019 a las 1:41

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.