[Solucionado] "search" del menu horizontal desplazado

[WeeWheels]

Buenas noches,

 

Llevo un buen tiempo apoyando me en vuestro foro y sin muchos conocimientos tengo mi tienda casi lista, así que ante todo mil gracias por todas la aportaciones.

 

La duda creo será de fácil solución pero no consigo dar con ella, entro en detalle:

 

Uso la cajetilla de "buscar" de la barra top menú, a medida que se reduce la resolución, esta queda desplazada saliendo se por la derecha de la web (ya sea en un teléfono puesto horizontal o en el mismo navegador reduciendo su tamaño).

 

La tienda:  www.weewheels.es

version: 1.5.4.1

Plantilla de: PS theme maker

 

esta tiene 4 resoluciones diferentes:

la nativa a 1040px y

@media screen and (max-width: 959px)

@media screen and (max-width: 759px)

@media screen and (max-width: 519px)

esta ultima lo desactiva así que no hay problema, el fallo esta en 959 y 759.

 

Por ultimo, sin relevancia pero por curiosidad, porque no funciona la pinza (hacer zoom) en ipad, android...?¿

 

Muchísimas gracias a todos ya de antemano!

 

 

[ventura]

con algo asi se debería mostrar bien en resoluciones medias:

 

@media screen and (max-width: 759px) {
li.sf-search {
    padding-right: 4%;
}
}

En cuanto a lo de la navegación con ipad y moviles prueba con esta metatags que creo que no exactamente igual a la que tienes en tu header.tpl

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

[WeeWheels]

Hola Ventura,

 

Muchísimas gracias por la respuesta, he intentado meter el código en diferentes sitios sin resultado, me puedes decir exactamente donde pegarlo?

 

La linea para lo de poder hacer pinza en dispositivos móviles si la he encontrado y substituido en el header.tpl, pero parece no tener efecto.

 

EDITO:

 

ya encontré donde pegarlo, global.css, falto la coletilla ".resp" por eso no tenia efecto, pego el codigo que responde correctamente.

 

.resp li.sf-search {

    padding-right: 9%;

}

 

9% es el maximo, si pongo 10% o mas me crea una 3º fila en el top menú, con el 9% en el telefono android sigue saliendose un poco, aquí va mi pregunta, donde debo tocar para reducir el tamaño horizontal del "buscar"? 

Edited December 8, 2013 by WeeWheels (see edit history)

[ventura]

 

Hola Ventura,

 

Muchísimas gracias por la respuesta, he intentado meter el código en diferentes sitios sin resultado, me puedes decir exactamente donde pegarlo?

 

La linea para lo de poder hacer pinza en dispositivos móviles si la he encontrado y substituido en el header.tpl, pero parece no tener efecto.

 

EDITO:

 

ya encontré donde pegarlo, global.css, falto la coletilla ".resp" por eso no tenia efecto, pego el codigo que responde correctamente.

 

.resp li.sf-search {

    padding-right: 9%;

}

 

9% es el maximo, si pongo 10% o mas me crea una 3º fila en el top menú, con el 9% en el telefono android sigue saliendose un poco, aquí va mi pregunta, donde debo tocar para reducir el tamaño horizontal del "buscar"? 

 

En esta ruta:

../themes/1BarraV/css/modules/blocktopmenu/css/superfish-modified.css

Y editas esta parte y la dejas asi más o menos:

 

@media screen and (max-width: 959px) {
li.sf-search {
    padding: 2%;
}
}

En cuanto a lo del metatags prueba a ponerlo de esta manera a ver

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes" />

Depende de si la plantilla es enteramente responsive o no

[Sergio Ruiz]

(Por si te sirve de algo, que no lo se)

 

Para hacer la caja de búsqueda mas pequeña
 

@media screen and (max-width: 959px) {
    li.sf-search input {
width: medidapx;
}
}

@media screen and (max-width: 759px) {
 li.sf-search input {
width: medidapx;
}
}

@media screen and (max-width: 519px) {
li.sf-search input {
width: medidapx;
}
}

Edited December 8, 2013 by Sergio Ruiz (see edit history)

[Sergio Ruiz]

Lo que te he comentado solo es para reducir el tamaño de la caja de texto en las distintas resoluciones (creo), no se si te sirve para algo, pero bueno por si acaso, pues te lo comente xD

[WeeWheels]

Ventura y Sergio, un millon de gracias, con vuestro código y toqueteando ya lo tengo a mi gusto.

(me costo un rato ver que: "width: medidapx;" --> "width: 170px;"  en mi caso  jejeje) 

 

Lo de hacer la pinza (zoom en tabletas) sigue sin funcionar, pero es algo secundario, ahora no se si cerrar el tema con titulo "supersolucionadisimo" y abrir otro hilo para el zoom o esperar la solución en este.

 

Gracias, gracias, gracias, gracias!!!

[nadie]

Como el autor del tema ha dado el tema como solucionado, añado la palabra "Solucionado" al titulo del tema y procedo a cerrar el tema.

 

Gracias a todos por colaborar con la Comunidad de Prestashop.

 

Saludos,