Buenas a tod@s:

Hoy vengo con una duda de programación web.

Sé que se puede solucionar con media querys pero no encuentro la solución en la red. A ver si alguien por aquí domina el tema. Que seguro que lo encuentro, porque con lo frikis que sóis/somos....


Bueno, al caso. Estoy haciendo mi web profesional y en la página de servicios he puesto de lado 3 fotos y debajo de cada una de ellas el nombre del servicio al que linkan.

Si se mira en PC o tablet ningún problema, pero cuando se consulta a través de movil se descuadra todo. He probado de hacerlo con una tabla pero después no queda adaptado al tamaño del móvil y no me mola tampoco.

La solución es de pasar a tener las 3 fotos en horizontal ponerlas en vertical.

Sé que la solución pasa por utilizar mediaquerys, sin embargo, no sé por donde tirar. He tocado algo con bootstrap, pero muy senzillo. Y ahora estoy trabajando con Wordpress.


Muchas gracias de antemano.

(13-10-2017, 04:59 PM)Electromecánico escribió: Buenas a tod@s:

Hoy vengo con una duda de programación web.

Sé que se puede solucionar con media querys pero no encuentro la solución en la red. A ver si alguien por aquí domina el tema. Que seguro que lo encuentro, porque con lo frikis que sóis/somos....


Bueno, al caso. Estoy haciendo mi web profesional y en la página de servicios he puesto de lado 3 fotos y debajo de cada una de ellas el nombre del servicio al que linkan.

Si se mira en PC o tablet ningún problema, pero cuando se consulta a través de movil se descuadra todo. He probado de hacerlo con una tabla pero después no queda adaptado al tamaño del móvil y no me mola tampoco.

La solución es de pasar a tener las 3 fotos en horizontal ponerlas en vertical.

Sé que la solución pasa por utilizar mediaquerys, sin embargo, no sé por donde tirar. He tocado algo con bootstrap, pero muy senzillo. Y ahora estoy trabajando con Wordpress.


Muchas gracias de antemano.

Hola Electromecánico,
si me envías enlace al sitio o el código te lo miro y lo arreglamos 

Hola @Electromecánico, no sé como lo tienes diseñado, pero creo que lo más acertado es usar una lista con los 
Las listas pueden incluir texto, imagenes, enlaces, etc y una de las ventajas que tienen es que las puedes poner en horizontal o en vertical...

Te recomiendo que mires el siguiente enlace: https://www.w3schools.com/css/css_navbar.asp en el que explican con detalle como hacer una lista y como ponerla en vertical u horizontal en función del css que le indiques.

Luego, como bien dices, con los mediaquery se aplicaría un estilo u otro en función de la resolución del dispositivo en el que se muestre el contenido.

En este enlace puedes ver ejemplos de como emplear mediaquery: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Pero para que lo tengas todo un poco junto, he preparado un ejemplo para ver si te sirve. Es una lista que cambia de horizontal a vertical en función del ancho de la pantalla. Mira este enlace: https://jsfiddle.net/wmkuLLjk/ y reduce el tamaño de la ventana del navegador para ver como cambia de una forma a otra.

Es un ejemplo muy sencillo, pero espero que te sirve de base para tu web, si necesitas algo mas en detalle, lo planteas por aquí y lo vemos.

Un saludo.

Buenas a tod@s:

Muchas gracias vcode.

He puesto en práctica lo que me has comentado y ha funcionado. Estaba buscando la web que adjuntas, porque ya la conocía, pero no conseguía encontrarla.


Muchas gracias de nuevo