Soporte » Diseño – Temas y plantillas » ¿ Por que la tabla ensancha la pantalla en dispositivos moviles?

  • Resuelto dianaclient

    (@dianaclient)


    Hola tengo un problema con una de las paginas de mi sitio.
    Hasta ahora lo estaba configurando un compañero que ya no puede seguir.
    El caso es que la política de cookies la copio y pego de otro sitio, configurando y cambiando los detalles personales y del sitio.
    El caso es que en dispositivos, la pantalla se ensanchan estropeando el diseño en la tabla que muestra las cookies de mi sitio.
    Mi experiencia es nula, y tampoco puedo recurrir a profesionales para que me ayuden con este problema.
    Me sugirieron que acudiera aquí a ver si podían ayudarme.
    ¿ Como puedo corregir el problema de la pagina de cookies para que sea responsive ?
    ¿ Como corrijo eso en WordPress ?
    Si no es este el sitio correcto para preguntar, me lo hagan saber y disculpen las molestias.
    Gracias.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 11 respuestas - de la 1 a la 11 (de un total de 11)
  • Moderador almendron

    (@almendron)

    Lo más sencillo es que no uses tablas. Te evitarás muchos problemas.

    Usa un párrafo para cada una de las cookies. Después del nombre puedes poner una lista no numerada. Ejemplo:

    <p>PHPSESSID</p>
    <ul>
      <li>Origen, Tipo y Duración: es una cookie propia, técnica y se hasta finalizar la sesion.</li>
      <li>Finalidad: Usada para envió de todo tipo de conexiones.</li>
    </ul>
    Iniciador del debate dianaclient

    (@dianaclient)

    Hola @ , gracias por el aporte.
    Como me has dicho, he cambiado todas las cookies a listas, pero sigue haciendo lo mismo en dispositivos móviles.
    Puede verlo usted mismo: https://lasmimosas.org/politica-cookies/
    Debo decir que copie: los nombres, contenido, duración, etc directamente y lo pegue a la pagina de edición de WordPress, no se si eso tendrá algo que ver para que me siga haciendo ese efecto tan feo.
    Gracias por el apoyo, a ver si alguien se le ocurre a que pude ser debido esto.
    Gracias, un saludo.

    Moderador almendron

    (@almendron)

    Iniciador del debate dianaclient

    (@dianaclient)

    Gracias por su apoyo @almedron.
    Siento decirte que no esta bien, el emulador no te muestra el scroll, pero como se puede ver, el texto se oculta en la parte derecha.
    Si lo pruebas en un dispositivo, se ve perfectamente el error.
    Gracias, seguiré buscando una solución.
    Gracias de nuevo por su tiempo

    Moderador almendron

    (@almendron)

    Yo sigo diciendo que se ve bien tanto en el emulador como en un dispositivo real (lo acabo de comprobar). Nada se oculta a la derecha y los saltos de línea son correctos.

    Nota: en el emulador, que funciona perfectamente, puedes hacer scroll vertical y comprobar que todo es correcto.

    Moderador jose64

    (@jose64)

    Hola

    Yo hace un momento vi que efectivamente la tabla te descuadraba el diseño, pero no usaste la alternativa que te dió @almendron, seguías teniendo una tabla en lugar de lista.

    Si quieres mantener la tabla debes aplicarle una clase a la tabla e indicar el tamaño máximo que puede tener, por ejemplo:

    table.cookie-table {
        background-color:#ccc;
        width: 80%;
        text-align: left;
        border-collapse: collapse;
        margin: 0 10%;
    }

    Si cambias la tabla por una lista no va a ser tan vistosa pero no tienes ese problema.

    Saludos

    Iniciador del debate dianaclient

    (@dianaclient)

    Buenas de nuevo @almendron.
    Pues en mi teléfono hace scrool lateral.
    He3 comprobado que si quito el contenido de las cookies, no lo hace, pero no se como hacerlo.
    Y si usted dice que no le pasa, no entiendo.
    Estoy probando con los 4 dispositivos que tengo en casa y en todos me hace scrool lateral en esta pagina.
    El contenido en alguna cookies es muy extenso:

    <strong><em>NID</em></strong>
    <strong> CONTENIDO</strong>:JryY96eFeMipw8cx_UhxxCvnh2cN1W3gseTwuSwUNnUQPsmD17UnOhrWzW1THmZaS3p7gbR7RpUOtJ70nWR0V5t6nwcU5hM7qGYL0imP_f_70isEYF7wCdP7EGyXB_K5gw
    <strong> ORIGEN:</strong> google.com
    <strong> FINALIDAD</strong>: Cualquier tipo de conexiones
    <strong> CADUCA:</strong> viernes, 5 de julio de 2019, 18:54:11

    ¿ Podría dejar el contenido menos extenso …?

    • Esta respuesta fue modificada hace 5 años, 2 meses por dianaclient.
    Iniciador del debate dianaclient

    (@dianaclient)

    Hola @jose64, gracias por el comentario.
    Si comprueba de nuevo, vera que si que aplique la lista que me ofreció @almendron.
    Simplemente por error, volví a colocar la pagina que tenia anteriormente.
    Le respondí a el sin ver el comentario de usted.
    De nuevo estoy editando para colocar todas las cookies de mi sitio.
    Pero por desgracia, sigue haciendo el scrool lateral.
    Estoy editando la lista de cookies, pero cuando el contenido es extenso, vuelve a descuadrar el diseño.
    Gustosamente haría lo que usted me dice, pero no se donde aplicar los estilos css que usted me recomienda.
    Y claro, no mostrar todo el contenido de mis cookies, no cumpliría enteramente las pautas de la política de cookies.
    Ahora puse tres cookies de contenido corto, y el diseño era perfecto, pero al añadir una mas, se estropeo de nuevo.
    La tabla simplemente estaba copiada de otro sitio, y la idea de @almendron es buena, pero sigue sin funcionar.
    Gracias, espera alguna idea mas que ustedes puedan darme.
    Gracias por el apoyo que me están ofreciendo.

    • Esta respuesta fue modificada hace 5 años, 2 meses por dianaclient.
    • Esta respuesta fue modificada hace 5 años, 2 meses por dianaclient.
    Moderador almendron

    (@almendron)

    A mi no me sale el scroll horizontal y lo veo todo perfectamente. En el emulador, ponga el dispositivo que ponga, también sale bien. Y sería la primera vez que ese emulador diera un error.

    Vacía la cache del navegador del móvil.

    Moderador jose64

    (@jose64)

    Hola @dianaclient

    Efectivamente yo si veo los cambios que vas haciendo y tanto en mi móvil como en la vista móvil del inspector del navegador me aparece el descuadre. No aparece scroll horizontal pero si arrastro la ventana hacia la izquierda aparece el espacio blanco.

    Te explico de forma sencilla lo que te ocurre. El problema es que el contenido es más largo que el espacio donde tiene que ir, por eso se sale y te aparece el descuadre en cualquiera de los dos casos (la tabla y la lista). Para que eso no suceda y cuando el texto llegue al límite del espacio que lo contiene salte a la línea inferior tienes que indicarle que corte las palabras cuando no quepan y continúe en la siguiente línea. Eso se hace con CSS:

    li {
        overflow-wrap: break-word;
    }

    Ese código tienes que incluirlo en tu tema en el apartado de CSS personalizado.

    Apariencia > Personalización > CSS adicional

    Ahora veo que pusiste la lista, con el código que te puse antes esas cookies que no entran en el espacio se dividen en varias líneas.

    Esta solución es válida también para la tabla, tienes que indicarle que en los campos divida las palabras si sobrepasan el ancho máximo.

    Aparte de eso te comento que para cumplir con la RGPD no es necesario que pongas el valor de las cookies (CONTENIDO), de hecho esos valores normalmente cambian con cada acceso o cada usuario. Por ponerte un ejemplo en las que tienes puestas una es una fecha y depende de cuando se instaló, y otra es un identificador único de usuario y no puede haber otro usuario con el mismo valor.

    Asimismo en lugar del vencimiento (CADUCIDAD) que depende del momento de instalación debes poner la duración (el tiempo entre las fechas de creación y caducidad), así determinas cuáles son PERSISTENTE (indicas cuanto tiempo se mantienen en el ordenador) y cuáles DE SESIÓN (al cerrar el navegador desaparecen).

    Si con esto resuelves el inconveniente, por favor recuerda cerrar el debate marcándolo como resuelto.

    Saludos.

    Iniciador del debate dianaclient

    (@dianaclient)

    Gracias @jose64, eres un crack compañero.
    Puedes probar ahora que funciona a la perfección.
    Ahora procederé a redactar las cookies da la manera que me has indicado, buscare algún ejemplo y al lió con ello.
    Tengo que decir que lo que pongo en las cookies lo he obtenido del navegador, pulsando el candado que esta a la izquierda de la barra de navegación.
    ¿ Hay otro sitio donde buscar mejor y con mas detalles las cookies que usa mi web ?
    Quizá haga otra pregunta para eso, y si encuentro solución podrá ayudar a otro que busque lo mismo.
    También debo agradecer a @almendron su apoyo y el rato que a estado probando mi sitio.
    No dudaba de su explicación, pero si no me da esta solución @jose64, les iba a mostrar el enlace de Search Console, que ya no es necesario, pero le dejo para que vea:
    Search Console

    Gracias a los dos por el apoyo prestado, gracias a gente como ustedes podemos solucionar problemas las inexpertas como yo.
    Un saludo.

Viendo 11 respuestas - de la 1 a la 11 (de un total de 11)
  • El debate ‘¿ Por que la tabla ensancha la pantalla en dispositivos moviles?’ está cerrado a nuevas respuestas.