Cómo Hacer Responsive Cualquier Iframe de Google Docs
Recientemente hicimos una encuesta en nuestro sitio web, y para eso utilizamos la herramienta de formularios de Google Docs. Sin embargo, varias personas nos contactaron para decirnos que no podían responder la encuesta desde su teléfono móvil…
… Estos suscriptores que nos contactaron, nos explicaban que no podían ver bien el formulario, se mostraba solo una parte, y no había donde escribir su respuesta.
Habiendo dicho lo anterior, a nosotros nos quedó claro que el problema era debido a que el iframe del formulario no era responsive, es decir, que no se estaba ajustando a las pantallas de los dispositivos móviles.
Entonces, nos dimos a la tarea de investigar cómo resolver el problema, y nos llevamos la sorpresa de que casi no había información sobre dicho tema, lo cual nos llevó mucho tiempo encontrar la solución, y es por tal motivo que decidimos hacer este tutorial, para que tú no pierdas tiempo, y puedas colocar los iframes de Google docs en tu sitio web, y hacerlos responsive (autoajustables)
NOTA 1: hasta donde sabemos, el siguiente código funciona para hacer responsive cualquier documento o formulario de Google docs, como los formularios para encuestas, Excel, Word, Google Maps, etc.
Clic aquí para ver en un documento de texto el código que nosotros usamos >>
NOTA 2: recuerda sustituir la URL de este iframe por la tuya.
NOTA 3: recuerda que en el video que está en esta página te mostramos todos los detalles sobre la utilización del código, el cual esta dividido en 2 partes.
RECURSOS ADICIONALES:
1) Este es el enlace directo de la fuente original donde nosotros obtuvimos el código: https://answers.squarespace.com/questions/141702/i-cant-get-my-google-sheet-to-be-responsive-what-a.html
2) Si deseas saber cómo crear una encuesta de manera gratuita con Google Docs, visita este articulo: https://mediadigitalfacil.com/crear-encuesta-con-formularios-google-docs
3) Si lo que buscas es aprender cómo construir un sitio web profesional con WordPress y Divi. Te recomendamos este recurso: https://mediadigitalfacil.com/curso-divi
–
Si te pareció que esta información es útil, por favor compártela y déjanos tus comentarios. ¡Gracias!
También te puede interesar
Deja una respuesta
Política de Comentarios de Media Digital Fácil
Media Digital Fácil te informa que los datos de carácter personal que nos proporciones rellenando el presente formulario serán tratados por Media Digital Facil (Media Digital Fácil ) como responsable de esta web.La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es para gestionar los comentarios que realizas en este blog.
Legitimación: Consentimiento del interesado.
- Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Siteground (proveedor de hosting de Media Digital Fácil ) dentro de la UE. Ver política de privacidad de Siteground. (https://www.siteground.es/privacidad.htm).
Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en Nuestro Sitio de Soporte así como el derecho a presentar una reclamación ante una autoridad de control.
- Por favor lea nuestra Política de Privacidad antes de dejar tu comentario.
10 Comentarios
Estimado. muchas gracias por el codigo, queda funciona perfectamente Responsive , solo quisiera saber que valor puedo modificar para que el documento de word online que estoy mostrando en la web sea mas height,
el width se adecua perfectamente.
Hola Alvaro,
Para modificar el “height” que es la altura, tienes que hacerlo en 2 partes del código. En este caso el valor de height es 2000, y lo que se debe hacer es cambiar ese valor. Si lo quieres hacer más alto, coloca 2500, o si lo quieres hacer más bajo cámbialo a 1500, hasta encontrar la altura que estás buscando. Pero recuerda que debe ser el mismo número en ambas partes para que funcione, esto lo explico en el video a partir del minuto 6:20 Por favor mira el video de nuevo. También mira esta captura de pantalla: https://prnt.sc/n0sg0z
Puxa vida, está dica foi demais, o codigo html e css funcionou, só tem que substituir a linha do (iframe que voce pegou o link no google. Abraços
Hola Junior, utilizamos el traductor de Google para entender tu mensaje, pero desafortunadamente ni asi pudimos entenderlo. Lamentamos no poder ayudarte.
Se lee facil, debe ser portuges o brasileño… te pongo lo que yo entiendo: “Puta vida, esta entrada fue demasiadó, el codigo de html y ccs funcionó, solo tuve que sustituir una linea del iframe que pegaste en el link de google. Abrazos.” Se fue contento el muchacho.
Yo por mi parte no he tenido tanta suerte, ya que no soy capaz de hacer responsives los iframes que da amazon. Quedan faltal en el movil y de regalo los enlaces no parecen funcionar.
Seguiré buscando.
Hola Lilu,
¡Muchísimas Gracias! Por tu ayuda con la traducción. Nos da gusto saber que nuestro contenido de le fue de utilidad.
Por otra parte, lamento escuchar el inconveniente que estas teniendo con los iframes de amazon, quisiera poder ayudarte, pero desafortunadamente no tenemos conocimiento en esa área con amazon. Suerte en la búsqueda.
Hola Alejandro,
Gracias por compartir esta solución al problema de Google Docs.
Mirando el codigo de CSS he visto que has dejado en “responsive-wrapper-wxh-760×1200” el mismo valor de padding-bottom (363.6364%) que me parece muy elevado (debería ser de 160%, es decir 1200/760*100). ¿Te sale bien este espacio aunque sea tan grande?
Muchas gracias!
Pier Paolo
Estimado Pier,
Quizás eso se debe a que las medidas originales eran 550×2000, y por eso con la ecuación que expones no cuadran los números. Sin embargo, te confirmo que por nuestra parte no queda ningún espacio, sino que todo ha quedado perfecto pese a esa diferencia.
Gracias por haber realizado esta observación.
Soy jubilado y no se como se hace?
Hola Miguel,
No te preocupes, y gracias por tu comentario.
Por otra parte, recuerda que el que sabe, no sabía. Es decir, que puedes aprender.
¡Saludos!