Logo Palene Móvil centrado  

Hola César.

.- Modifica el tamaño de la imagen del móvil para que tenga un tamaño de 200px.

Para eliminar la fecha y añadir el nuevo logo añade lo siguiente tu hoja de estilos ( CSS )

@media only screen and (max-width:  480px) {
#rt-top .date {
    display: none;
}
#rt-logo {
    background: rgba(0, 0, 0, 0) url("https://fuerteventura100.com/wp-content/uploads/logo-fuerteventura100-movil-300px.jpg") no-repeat scroll left center !important;
}
}

Nota: Modifica la url del logo con la imagen nueva que creaste " url("https://fuerteventura100...... "

Una vez eso veremos lo de subir el logo y si tenemos que modificar su tamaño desde css ya que veo :

width: auto !important;
height: 40px !important;

Y es posible que tengas que modificar ese tamaño, pero lo vemos después de realizar las modificaciones anteriores.

Un saludo

Hola, Pepe... Gracias.

Acabo de hacerlo... He subido el logotipo a un tamaño de 200px de ancho y 28 de alto y he eliminado el fragmento de código anterior (El que vi en otro hilo del foro):

@media only screen and (max-width: 767px) {
#rt-logo {
background: rgba(0, 0, 0, 0) url("fuerteventura100.com/wp-content/uploads/logo-fuerteventura100-movil-300px.jpg") no-repeat scroll left center!important;
width:auto!important;
height:40px!important;
}
}

Y lo he sustituido por el que me has enviado.

La Fecha no aparece y el logotipo aparece muy debajo... No he querido modificar las propiedades width y height "a la espera de tus instrucciones"... 🙂

Un saludo

Hola César.

Añade lo siguiente:

@media only screen and (max-width:  480px) {
.logo-block {
    margin-top: -5em!important;
    margin-left: 3em!important;
}
}

Un saludo

Hola, Pepe... Mucho mejor (Adjunto captura de pantalla), aunque:

1.- ¿Se puede centrar? Si te fijas, aparece más pegado al botón izquierdo que al de búsqueda.
2.- ¿Cómo reducir el espacio entre el logotipo y el breadcrumbs que hay debajo?

Gracias

Hola Cesar,

Yo no veo ningún "breadcrumb" (migas de pan) en la web por lo que no creo que sea esa la causa dle espacio debajo del logo.

Si observo que tu logo de la versión escritorio Contenido solo visible a usuarios registrados es diferente del logo que aparece en móviles.

¿Tienes logos diferentes asignados?

Saludos

Hola Luis:

Sí. Tengo logotipos diferentes asignados en función de si se trata de una versión móvil o de escritorio. Lo he hecho tras aplicar el consejo de tu compañero Pepe en este mismo hilo. Adjunto te muestro el fichero CSS que tengo en Ajustes Palene > Override "Default Settings" > Estilo.

Este CSS es producto de varias modificaciones que he venido haciendo últimamente tras varias consultas a través de vuestro foro, donde he venido aplicando cada uno de los consejos (y mejorando notablemente el aspecto y funcionalidad de la página).

En cuanto a lo que me comentas de las migas de pan, me he dado cuenta de que di por obvio en mi explicación anterior que los breadcrumbs aparecían en la Home y no... Ahí no aparecen, pero sí en las páginas interiores (tal y como te muestro en la captura de pantalla adjunta). La URL de ejemplo es:

Contenido solo visible a usuarios registrados

En este tiempo que ha transcurrido desde que inicié este hilo hasta ahora he visto que una solución factible al aspecto en la versión móvil es la que me dió tu compañero Pepe esta mañana: Que el logotipo quede donde está actualmente, tal y como tu compañero me indicó (lo único que me gustaría es ver si se podría centrar en la pantalla) y poner un banner debajo estilo "SUSCRÍBETE" o cualquier otro similar, tal y como se muestra en la web actualmente.

La pega de lo que he hecho es obvia:
1) En versión móvil deja mucho espacio tanto por encima como por debajo del banner "¿TE SUSCRIBES? ES GRATIS".

2) En versión de escritorio queda un espacio en blanco (que supongo coincidirá con la altura de ese banner que solamente se muestra en versión móvil).

Te cuento cómo lo he creado y, si lo consideras apropiado, me dices qué debo rectificar:

1.- He creado con el plugin SHORTCODER un shortcode denominado [sc name="suscribete"] que sencillamente muestra ese banner.
2.- En la configuración de shortcoder he puesto que ese shortcode solamente se muestre en versión de escritorio.
3.- He creado un widget de HTML personalizado en la posición "NAVIGATION", justo encima del widget GANTRY LOGO.

Y bueno... el resultado lo puedes comprobar tanto en las capturas de pantalla como navegando por la web.

Evidentemente, mi falta de conocimientos en profundidad hace que me estanque en este tipo de cosas... Lo lamento.

Un saludo, Luis

César

Hola César,

Efectivamente en post de la web si veo la ruta (breadcrumb):

En este tiempo que ha transcurrido desde que inicié este hilo hasta ahora he visto que una solución factible al aspecto en la versión móvil es la que me dió tu compañero Pepe esta mañana: Que el logotipo quede donde está actualmente, tal y como tu compañero me indicó (lo único que me gustaría es ver si se podría centrar en la pantalla) y poner un banner debajo estilo "SUSCRÍBETE" o cualquier otro similar, tal y como se muestra en la web actualmente.

¿Te has planteado utilizar un builder para construir la vista de la web en dispositivos de forma que no tengas que estar modificando estilos nativos del tema, que a la larga siempre será peor, sobre todo de cara a actualizaciones?

Saludos

Gracias, Luis:

¿Qué builder me podrías recomendar? La verdad es que es algo que nunca he trabajado.

Hola César.

Por ejemplo tienes -> https://es.wordpress.org/plugins/siteorigin-panels/

Exactamente que es lo que te falta ¿ Centrar el logo ? puedes modificar el valor de " margin-left: 3em!important; " que te pase hasta dejarlo en la posición que quieres.

Un saludo

Hola, Pepe:

Muchas gracias por tu respuesta... Tal y como me indicabas, he modificado el valor

margin-left: 3em!important;

por 4em y ahora está perfecto (al menos en mi móvil).

La otra parte de la pregunta que hice al compañero Luis se refería al banner que aparece en móvil.

El problema que le veo es sencillamente que deja mucho espacio vacío tanto por arriba como por debajo... Es simplemente un widget HTML donde he añadido la imagen del banner de suscripción, y con un plugin he conseguido que se muestre en versión móvil sin afectar a la versión de escritorio (quedaba horrible la otra opción que escogí).

Sin embargo... Sucede lo que te comenté un párrafo más arriba... El widget HTML deja mucho espacio tanto por arriba como por debajo y me gustaría reducirlo (Supongo que con CSS).

Una vez más... Muchísimas gracias por tu ayuda,

César

Hola César.

Prueba con lo siguiente:

@media only screen and (max-width:  480px) {
.rt-container [class*="rt-grid"] {
    margin-bottom: -5em!important;
}
}

Un saludo

Hola de nuevo, Pepe... He estado jugando con los valores que me has enviado en este último mensaje.

@media only screen and (max-width: 480px) {
.rt-container [class*="rt-grid"] {
margin-bottom: -5em!important;
}
}

El valor "-5em" se come medio titular del post... Las tres o cuatro primeras palabras del título de cualquier post desaparecen... Por ello, he ido jugando hasta encontrar que el que mejor se adecúa es el valor -2em. Queda algo mejor pero se come los breadcrumbs. No se muestran.

¿Tú qué harías? Se me ocurre que, para no liarnos más, elimino los breadcrumbs de la versión móvil ¿Qué opinas al respecto?

Gracias

Hola césar.

elimino los breadcrumbs de la versión móvil
Si, es una opción y tampoco le veo mayor importancia el que se muestren, puedes probar como se muestra, igual al eliminarlos tienes que modificar un poco los valores de los códigos que te pase hasta ajustarlo.

Un saludo

Gracias, Pepe... Lo voy haciendo... Mucha mejor pinta, desde luego