Header responsive
-
Hola a todos!
Estoy utilizando la plantilla MARLA de WordPress y tengo un problema: el header no es responsive. Se ve la imagen (el logo) muy grande desde el móvil, y no se como cambiarlo. Intenté tocando el código html pero no lo logré. Alguien podrá ayudarme?
Mi página es yogadelalma.com
Ante todo muchisimas gracias!!!
-
Hola,
Responsive sí es, se ajusta al ancho del dispositivo, lo que debes hacer es subir una nueva imagen con tu logo pero que tenga de ancho unos 480px respetando el alto, es decir, deja un espacio transparente por ambos lados para hacerla más ancha. El resultado será una imagen rectangular y como máximo tendrá 480px de ancho en cualquier dispositivo.
Saludos
Muchas gracias! Ahora quedó perfecto.
Lo que me quedó mal ahora es el título. Te paso imagen, si me podés ayudar sería genial!! Infinidad de gracias 🙂
Imagen: http://es.tinypic.com/r/2r5rbbn/9Yo lo estoy viendo bien. Puede que sea alguna resolución concreta que tengas cacheada.
Un saludo.
Hola,
El problema cuando es una palabra tan larga como «Bienvenidos» y una resolución pequeña se corta porque tiene aplicada la regla CSS
word-wrap: break-word;
Para que esto no ocurra puedes añadir desde la sección de personalización del tema una regla CSS que no corte el título
h1.entry-title { word-wrap: normal }
Saludos
Gracias a ambos! Ahora me funcionó bien.
Hay alguna forma de que la primer palabra no aparezca más grande que la palabra de abajo? («Bienvenidos a» queda más grande que «Yoga del Alma»)
Y otro problema que tengo es que quedó mucho, mucho espacio entre el titular y el texto de las entradas y páginas. Probé cambiando el padding y margin de algunas partes del editor y no me funciona. Cuál es el espacio que tengo que reducir en este caso?
Y la última: quiero eliminar el formulario de búsqueda, pruebo borrando el contenido de searchform.php y no me funciona. Tengo que tocar la hoja de estilos??
Muchísimas gracias!
(Tema titular: aclaro que prefiero que quede todo del tamaño de la segunda línea, que de la primera. De lo contrario es muy grande)
Para quitar el cuadro de búsqueda tienes que editar el archivo header.php. Crea una copia antes por si algo va mal.
Donde pone:
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?><div class="fright clearfix"><form method="get" class="searchform fright clear" action="<?php echo esc_url( home_url( '/' ) ); ?>"><input name="s" id="topsearch" type="search" placeholder="<?php _e( 'search...', 'marla' ); ?>"/></form></div>
debe poner:
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?><div class="fright clearfix"></div>
Es decir eliminar el formulario desde <form hasta /form>
Lo del tamaño de la primera línea lo tienes en el style.css donde pone:
#content h1:first-line {
font-size: 1.6em;
line-height: 1.3em;
}Eso hace que la primera línea salga con un atamaño de letra diferente. Puedes eliminarlo todo y poner en:
#content h1 {
text-align: center;
padding: 45px 0;
font-size: 1.2em;
}en font-size: 1.2em; un tamaño mayor.
Un saludo
-
Esta respuesta fue modificada hace 8 años, 5 meses por
LGrusin.
Hola,
El CSS que se aplica a la primera línea del titular es este, ahí mismo puedes cambiar el padding inferior que está puesto en 46px
#content h1:first-line { font-size: 1.2em; padding-bottom: 0;}
Para ocultar el buscador añade este CSS
#site-navigation > .fright { display: none; }
Saludos
Perfecto, muchas gracias a ambos! Pude ocultar el buscador y evitar que la primera linea tenga un texto más grande que la segunda.
Lo que sigue sin funcionarme es el tema del padding: en desktop sigue habiendo mucho espacio entre el titular y el párrafo: esto es peor en la página de inicio del tema (la estática), no es tan grande en cambio en las otras entradas.
Cual de todos los paddings hay que tocar??
Gracias de nuevo y disculpas por las molestias!Hola de nuevo,
El título tiene un padding inferior y superior de 46px para quitarlo usa este, en mi anterior respuesta cometí un error poniéndolo en la misma regla de first-line, disculpa
#content h1 { padding-bottom: 0; }
Saludos
Hola ceslava! Gracias, como siempre, pero me sigue pasando. Habrá algo que hice mal?
Me pasa solo en la página principal (estática).
Saqué el modo mantenimiento así puedes ver el código fuente.
Quizás no tengo los suficientes conocimientos de html como para entender tus consejos, pero creo que lo hice bien!
Disculpá las molestias!!
Saludos 🙂Posiblemente tengas algún párrafo en blanco antes del texto. Pon el editor en modo Texto para que puedas ver exactamente qué es lo que hay escrito.
Un saludo
Hola,
El padding del titular está corregido, si quieres reducir más el espacio es porque el texto de después del título tiene un margen superior. Puedes ponerlo a 0 o incluso en valores negativos
.entry-content { margin-top: 0; }
Pero en esa página en concreto tiene razón @lgrusin, tienes un párrafo vacío, entra en editar esa página y borra la primera línea vacía que tengas.
Saludos
Hola, acabo de escribir algo y no se ve posteado. Les decía que ese problema tampoco lo pude solucionar, pero ahora tengo un problema peor: probé mirar la página desde otro celular que no es el mío, y se ve terrible: nada se ve centrado, ni el logo ni las imágenes.
Y yo me había tomado el trabajo de ponerles a todas un margen transparente derecho e izquierdo para que no se salieran del espacio de texto. Y ahora todas se salen. También a todas obviamente les puse formato centrado en html.
Cuál puede ser el problema?
Les paso algunas imagenes:
http://es.tinypic.com/r/o7vuc1/9
http://es.tinypic.com/r/jij33m/9
http://es.tinypic.com/r/4rbb0g/9
Muchas gracias!Pues creo que el centrado es el problema. Las imágenes salen bien no tienes por qué centrarlas.
También debes tener cuidado con los plugins que uses. La imagen del mapa en las entradas no sale bien, lo demás lo veo bien.
@ceslava es el autor del tema y te puede orientar mejor.
Un saludo
-
Esta respuesta fue modificada hace 8 años, 5 meses por
- El debate ‘Header responsive’ está cerrado a nuevas respuestas.