Hacer que la calificación de escala sea más adaptable a dispositivos móviles

  • Camila_Camilaarias
    Fecha de consulta 22 de octubre de 2024, 17:15

    Buenas tardes,

    Escribo por que quisiera adquirir uno de sus planes ya que necesito generar una encuesta de satisfacción de cliente para la empresa, pero al realizar una pruba piloto y ver la vista previa desde celular la version responsive no es muy amigable, ya que el banner princial se pixela y contrae, las preguntas con seleccion de un puntaje de 1 al 10 quedan muy grandes.

    Es posible mejorar desde el diseño esta experiencia en movil? Que opciones existen para mejorar el diseño en versión movil?


    Muchas gracias, quedo atenta.

  • Raymond Jotform Support
    Fecha de respuesta 23 de octubre de 2024, 0:24

    Hi Camila,

    Thanks for reaching out to Jotform Support. Unfortunately, our Spanish Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Spanish, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

    I understand you'd like to improve the mobile responsiveness of your form. This can be done by injecting a few CSS codes to customize the fields and its elements. Let me show you how to fix that:

    First, copy the codes below:

    /* fit scale rating options in mobile - 20368151*/
    @media screen and (max-width: 720px) {
    .rating-item {
      width: 9%;
      margin-right: 1% !important;
    }
      .rating-item-group {
       display: flex;
      }
    }
    /* Ends here */

    Now, let's inject the code to your form:

    1. In Form Builder, click on the Paint Roller icon on the right.
    2. Next, click on the Styles tab, and paste the codes to the Inject CSS box.
      Hacer que la calificación de escala sea más adaptable a dispositivos móviles Image 1 Screenshot 30

    Here's how it would appear on mobile devices:

    Hacer que la calificación de escala sea más adaptable a dispositivos móviles Image 2 Screenshot 41

    As for the header image, it doesn't seem distorted as seen in the screenshot above but if it still happens to you, let us know together with the make and model of the device you're using and a screenshot of how it shows.

    Give it a try and let us know if you need any help.