Soporte » Diseño – Temas y plantillas » Problema con la cabecera del tema Sela

  • Resuelto Casa de la Mujer San Isidro

    (@casadelamujersi)


    Hola amigos,
    Tengo un problema que no logro dar con la solucion. Para la pagina de un comedor, utilice el tema SELA, todo es adaptable a los moviles, menos la foto de la cabecera, y no entiendo que sucede. Si alguno me puede ayudar a ver en donde esta mi error, desde ya muy agradecidas.
    Es nuestro primer sitio que desarrollamos con los manuales y guias que tienen publicados que son de mucha utilidad.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 12 respuestas - 1 de 12 (de 12 total)
  • Moderador almendron

    (@almendron)

    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.

    Moderador almendron

    (@almendron)

    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.

    Moderador almendron

    (@almendron)

    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.

    Moderador LGrusin

    (@lgrusin)

    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.

    Moderador LGrusin

    (@lgrusin)

    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

Viendo 12 respuestas - 1 de 12 (de 12 total)
  • Debes estar registrado para responder a este debate.