Avisos
Vaciar todo

Hosting WordPress 70% dto Dominios promo

comenzar con Slider para versión móvil  

 
Juan Manuel
 Juan Manuel
Usuario eminente

Buenas,

tengo configurada la pag para que la parte superior comience con un slider, sin parte de la fila pero manteniendo el logo de cabecera. Quisiera hacer lo mismo para la versión móvil. Ya tengo el header transparente, pero se visualiza la fila. ¿cómo podría eliminar esa parte de la fila para que se vea como en la versión PC?

Adjunto imaginen para que vean de forma más clara lo que se pretende. Uso Chrome para las visualizaciones.

gracias

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 22/11/2018 7:03 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Puedes probar usando el siguiente código CSS

@media ( max-width:978px){
    .q_logo {
        top: 50%;
        left: 0;
    }

    .header_bottom .container_inner{
        height:0;
        float:right;
    }    
}

Puedes agregar este código al final de tu archivo style.css de tu child-theme

Saludos.

ResponderCitar
Respondido : 22/11/2018 8:34 pm

Juan Manuel
 Juan Manuel
Usuario eminente

Buenas,

muchas gracias. El problema es que introduciendo ese código el logo en versión móvil se me descoloca 🙁

ResponderCitar
Respondido : 22/11/2018 9:08 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Prueba agregando el siguiente código adicional al código anterior

@media ( max-width:480px){
    .q_logo {
        left: -120%;
    }
}

Saludos.

ResponderCitar
Respondido : 22/11/2018 9:35 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Juan Manuel
 Juan Manuel
Usuario eminente

Hola,

gracias por el código; retocándolo un poco más o menos he conseguido lo que pretendía. Aunque para ponerlo un tanto más pequeño el logo en versión móvil trato de hacerlo y no lo consigo. Os paso dos códigos. Uno que funciona pero con logo demasiado grande para móvil (A) y otro intentándolo escalar (B)

CÓDIGO A
@media ( max-width:978px){

.header_bottom .container_inner{
height:0;
float:right;
}
}
@media ( max-width:480px){
.q_logo {
left: -100%;

}
}

CÓDIGO B

@media ( max-width:978px){

.header_bottom .container_inner{
height:0;
float:right;
}
}
@media ( max-width:480px){
.q_logo {
width: -50% !important;
left: -100%;

}
}

ResponderCitar
Respondido : 22/11/2018 10:18 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Juan Manuel.

Prueba con lo siguiente:

@media only screen and (max-width: 480px) {
header .q_logo img.mobile {
width: 25%!important;
height: auto!important;
}
}

Un saludo

ResponderCitar
Respondido : 23/11/2018 10:20 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Juan Manuel
 Juan Manuel
Usuario eminente

Buenas,

>poniendo ese código + el código para 978px ,"eliminas" el logo.

>poniendo ese código sólo, lo escalas pero mantienes la fila que no se desea.

>poniendo el codigo de la Captura 1, todo estaría perfecto salvo por el tamaño no deseado del logo en versión móvil.

muchas gracias

ResponderCitar
Respondido : 23/11/2018 1:06 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Juan Manuel

Veo que se redimensiona bien:

Otra cosa es que tengas otros códigos que lo escondan con alguna resolución por ejemplo veo que tienes movido el logo

.q_logo {
left: -120%;
}

Estas cosas pueden hacer que el logo se desplace tanto que no sea visible en algunas resoluciones.

No es bueno hacer tantos cambios ya que un codigo puede servir para algo en concreto pero también afectan a otros sitios/resoluciones.

Un saludo

ResponderCitar
Respondido : 23/11/2018 2:47 pm

Cursos Gratuitos WordPress

Juan Manuel
 Juan Manuel
Usuario eminente

Hola,
soy nuevo en esto y tal vez estoy metiendo la pata.
Realmente, ¿no hay manera de que el header tenga en mismo comportamiento en versión Pc que en versión movil/tablet desde Qode Option sin necesidad de usar CSS tal y como se muestra en la imagen adjunta?

ResponderCitar
Respondido : 23/11/2018 5:10 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Lamentablemente no es posible de forma simple y siempre terminarás usando CSS, ya que la estructura que se genera no esta pensada para ese diseño en móvil

Te sugiero consultar con el desarrollador del theme tal vez tenga alguna actualización o mejora

Saludos.

ResponderCitar
Respondido : 23/11/2018 5:32 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación