En la siguiente regla
.site-branding {
background: #fff;
background-position: center;
background-repeat: no-repeat;
text-align: center;
height: 100%;
min-height: 72px;
padding: 3em 0 36px;
text-align: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Lo indicado en la siguiente línea hace que en los móviles no se muestre la imagen por completo
min-height: 72px;
lo probe, comentando la linea que me mencionas, pero la imagen sigue viendose mal.
¿Que podra ser?
Mil gracias por la ayuda.
Yo lo he comprobado y comentando esa línea ya se ve bien. Prueba a refrescar la página.
A lo mejor es que estamos hablando de problemas distintos. ¿Qué es lo que tú ves mal exactamente? Yo, lo único que veo distinto es que la imagen no se ve completa en los móviles.
Hola @almendron, ayer no se copio mi respuesta, vi lo que me decias, y si comento la linea la foto de portada se ve mal, entonces empece a jugar con el tamaño en rem (lo aprendi ayer cuando me diste esa pista) el tema es que no puedo dar con el tamaño correcto, para que la foto se vea bien. Hoy tengo la configuracion en este tamaño:
min-height: 2.8rem;
¿Por ahi la unidad de medida rem no aplica para imagenes?
Mil gracias por tu valiosa ayuda, recien empezamos con el tema de la programacion en general y estamos aprendiendo. Por favor disculpa nuestra ignorancia en el tema.
1) Con la instrucción background-size: cover lo que se consigue es escalar la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío.
2) Al indicar una altura mínima, llega un momento en el que la imagen ya no se escala ya que alcanza dicha altura.
3) Yo no tocaría nada y dejaría la altura mínima tal y como está. Eso sí, cambiar la imagen por una con un tamaño igual al que recomienda el autor, es decir, 1180 x 160 pixels. La vuestra es más grande.
barbaro, ya lo hago.
Muchas gracias por tu generosa ayuda.
Me acabo de dar cuenta que si tiene el tamaño que sugieres en una resolucion de 100, por ahi puede ser por esto?. Otra prueba que voy a hacer es cambiar la foto de portada, a ver como se comporta.
Buen dia, aqui paso mi configuracion de la imagen, el resize del tema lo hace perfecto pero no ajusta la imagen de cabecera. Quisiera que salga la imagen entera pero no logro ajustarla
Datos
Tema: SELA
Blog: http://https://casadelamujersi.000webhostapp.com/
Navegador: Chrome Windows7
Dimensión cabecera: 1180 × 160 pixeles
—Hoy cambie el tamaño de la cabecera a 1038 x 250 pixeles y ahora si lo veo en los moviles se ve perfecto pero en la compu no.
Gracias
Gracias por la ayuda de antemano.
La imagen es muy larga para que se vea completa en un teléfono móvil. Si no te gustan las soluciones anteriores prueba lo siguiente en el menú Apariencia – Personalizar – CSS Adicional:
@media screen and (max-width: 480px) {
.site-branding {
padding:0;
}
}
Gracias por tu respuesta, no es que no me gusten, aplique todas y cada una de las respuestas, e igual se ve mal la foto, el media screen tambien lo modifique, (en el css original) pero no tuve exito tampoco. Los tamaños que probe, son todos los sugeridos anteriormente, mi pregunta es entonces ¿cual seria un tamaño que se vea bien tanto en los moviles como en las pcs y tablets?
Muchas gracias por tu generosa ayuda.
Hola
Cambia el background-size: cover; por background-size: contain;
Puedes revisarlo aquí:
CSS background-size Property
Con esto deberías resolverlo, si es así recuerda cerrar el debate marcándolo como resuelto, así nos ayudas a mantener el foro al día.
La mayoría de temas lo hacen así, es decir, se corta de los lados y de deja centrado el alto para que se vea la parte central de la imagen. Si muestras la imagen completa en un móvil se vera completa pero muy pequeña adaptada a la pantalla del dispositivo.
¿Has probado si te gusta lo que te he respondido antes?
Hola Gracias por responder, he probado todo, y estoy probando el tema de background-size: contain;
Desde ya muchas gracias por la ayuda. Con la respuesta de @jose64 doy por finalizado el tema, el cambio ha resultado, por ahi no estoy del todo conforme pero logre el objetivo de que la imagen se vea completa pero pequeña.
Mil gracias por su ayuda, fue un gran aprendizaje
