Un usuario preguntó 👇
Buenos días. Mi sitio de Escapade se ve bien a menos que la imagen de encabezado se vea mal en dispositivos móviles. ¿Alguien tiene un código que podría poner en la sección «CSS adicional» para 1. especificar una foto diferente para mostrar en un teléfono móvil y forzar que la imagen se vea bien? o 2. obligar a que esta foto se vea bien en dispositivos móviles. Gracias. Además, quiero usar una imagen de encabezado diferente en las páginas internas; esta se recorta automáticamente de manera incorrecta. ¿Qué código «CSS adicional» puedo usar para controlar eso? Gracias.
(@paulwp)
hace 1 año
Pruebe esto para ajustar el tamaño de la imagen del logotipo para la visualización móvil.
@media only screen and (max-width: 55.063em) {
.custom-logo-link { max-width: 250px; display: block; margin: 16px 16px -16px; }
.site-title { font-size: 18px; margin: 0 0 0 16px; }
}
Tenga en cuenta que max-width: 55.063em igual que lo que usa un tema, tiene que serlo. El es .site-title extra, lo inserto para hacer el tamaño de fuente más pequeño para que no haga que el logo sea demasiado poderoso. Ajuste el margen, el tamaño de fuente como mejor le parezca.
Para obtener un logotipo diferente para las subpáginas (páginas que no sean la página de inicio frontal), simplemente use :not() centrarse en una página «que no sea de inicio» y luego mostrar la imagen del logotipo predeterminada como esta
:not(.home) .custom-logo-link img { display: none; }
luego inserte la imagen usando :before Un elemento CSS simulado para el contenedor de enlaces, como este
:not(.home) .custom-logo-link:before {/***add in the image url as content along with width and height ***/}
Haga esto 2 veces, una para la pantalla pequeña y otra para la pantalla grande, con el mismo ancho (valor / unidad) @media una pregunta que usa ese tema.
(@veronikagunter)
hace 1 año
Su código para mejorar el logotipo de la página de inicio es excelente. Lo implementé y eso es una gran mejora en la visualización de la imagen de la página de inicio. ¡Gracias!
Para la imagen del encabezado de los medios en las páginas interiores y sus instrucciones, ¿esos archivos son archivos de «logotipo» o son archivos de imagen? A continuación, se muestra un ejemplo de cómo se carga la foto familiar de una página de inicio en las páginas interiores (extraño recorte automático, no tengo idea). Esa es la foto que quiero reemplazar y controlar; actualmente, cada página interna usa y anula automáticamente la imagen que publiqué en la sección de medios del encabezado de la sección de inicio. ¡Gracias!
(@paulwp)
hace 1 año
Entendí tu segunda pregunta. Se refirió a la imagen del encabezado, dije que era una imagen de logotipo.
Para una imagen de encabezado, el tema generalmente usará una imagen de página / publicación como imagen de encabezado. ¿Ha intentado asignar una imagen específica a cada página? Así es como funcionan la mayoría de los temas. También verifique a fondo la opción de tema.
Si el tema no tiene esa opción, y una imagen visible no establece una imagen asignada, podemos usar CSS para configurarla.
Pero antes de obtenerlo, tenga en cuenta que este tema utiliza una imagen de encabezado como fondo para cubrir el área del encabezado. La razón por la que la imagen de la página principal se ve bien y no es tan correcta en otras páginas (ir arriba) es porque hay más texto en esta área de la página principal. Al usar una imagen diferente para otras páginas, esto se puede configurar pero no será perfecto, porque la altura del área se establece de acuerdo con el tamaño del texto y el relleno vertical, se mostrará una imagen de fondo (expuesta) basada en esta altura. Entonces siempre se recorta de alguna manera.
El código a continuación es una disposición simple para agregar más relleno vertical al área del encabezado (para páginas que no sean la portada), esto revelará más imagen de fondo (se colgará menos). Pruebe este código primero, no necesita una imagen diferente.
body:not(.home) .hero { padding-top:300px; padding-bottom: 20px; }
Creo que el código anterior ya solucionará el problema, pero si no le satisface, use el código siguiente.
body:not(.home) .site-header {
background-image: url(https://dummyimage.com/1000x250/ff0000/0011ff.png)!important;
}
@media only screen and (min-width: 55.063em) {
body:not(.home) .site-header {
background-image: url(https://dummyimage.com/2000x500/ff0000/0011ff.png)!important;
}
}
Simplemente reemplace la URL de la imagen. El primero es para pantalla pequeña, el segundo es para pantalla grande.
Como nota al margen, una :not aún no está bien soportado cuando se usa como tal, pero se probó con la última versión de Firefox, Chrome, en Windows 10.
¿Solucionó tu problema??
0 / 0