-
ohGiftCardHola, cómo están?
Estamos teniendo un problema con la visualización de los formularios en el formato mobile. Cuando se ingresa al formulario, en la sección de escala lineal (1-10), solo se ven los valores del 1-6 ó 1-5 y los usuarios del formulario piensan que la encuesta es del 1-5 en vez del 1-10 y nos rompe nuestra base. Hay alguna forma de solucionarlo para que se vean completa del 1-10?
Quedo atenta,
Gracias y saludos!
-
Reban Jotform SupportHi ohGiftCard,
Thanks for reaching out to Jotform Support. Our Spanish Support agents are busy helping other Jotform users right now, so 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, it might take a while until they're available again.
Now, coming back to your question. Can you share the form link where you’re experiencing the issue? You can easily find your form's URL in Form Builder. Let me show you how:
- In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
- In the Quick Share tab, click on Copy Link in the Share With Link section.
Once you share the form URL with us, we’ll be able to help you better with this. -
ohGiftCard
Hola, cómo están?
Esta es la encuesta que se ve mal en formato mobile https://www.jotform.com/241153640410644
La escala lineal se ve cortada
Queda atenta,
Muchas gracias!
-
Ronald Jotform SupportHi ohGiftCard,
I checked the form and tried to modify the spaces using CSS. Unfortunately, due to the theme you're using, the styles on the rating scales can't be overwritten to scale them on mobile devices. Here's a CSS code that you can use to adapt its radio buttons and labels for mobile devices by Injecting CSS Codes into your form. Let me walk you through it:
1. First, copy this code:
.form-sub-label-container {
display: block;
width: 100%;
overflow-x: hidden; /* prevent horizontal scroll */
}
.form-scale-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
word-wrap: break-word;
}
.form-scale-table th,
.form-scale-table td {
text-align: center;
padding: 6px 4px;
font-size: 14px;
}
/* General label style */
.form-scale-table label {
font-size: 12px;
white-space: normal; /* allow wrapping */
word-break: break-word;
line-height: 1.2;
}
/* Make side labels (Nada probable / Altamente probable) neatly wrap into two lines */
.form-scale-table td:first-child label,
.form-scale-table td:last-child label {
display: block;
text-align: center;
font-weight: 600;
font-size: 13px;
max-width: 60px; /* control width so it breaks naturally */
margin: 0 auto;
line-height: 1.2;
word-wrap: break-word;
}
/* Slightly larger radios for tap targets */
.form-scale-table input[type="radio"] {
width: 18px;
height: 18px;
}
/* MOBILE VIEW */
@media screen and (max-width: 600px) {
.form-scale-table {
transform: scale(0.85);
transform-origin: top center;
}
.form-scale-table th,
.form-scale-table td {
padding: 4px 2px;
}
.form-scale-table label {
font-size: 11px;
}
.form-scale-table td:first-child label,
.form-scale-table td:last-child label {
max-width: 50px; /* narrower for phones */
font-size: 12px;
}
.form-sub-label-container {
overflow-x: hidden;
}
}
/* Extra-small phones */
@media screen and (max-width: 400px) {
.form-scale-table {
transform: scale(0.75);
}
}
2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.
3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.
See the screenshot below for the results:
Give it a try and let us know how it goes.
-
ohGiftCard
Pero no se leen bien los encabezados de la encuesta en la imagen que me mostras al final. Se ve la escala pero los encabezados quedan cortados
-
Ronald Jotform Support
Hi ohGiftCard,
That happens because on mobile devices, the screen space is smaller, and the rating scale takes up most of the width. As a result, the lowest and highest rating labels become compressed, and the words get broken, which affects readability.
You can try adjusting the font size or letting the text wrap properly so the labels display clearly on smaller screens with the code below:
.form-sub-label-container {
display: block;
width: 100%;
overflow-x: hidden; /* no horizontal scroll */
}
.form-scale-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
word-wrap: break-word;
}
.form-scale-table th,
.form-scale-table td {
text-align: center;
padding: 6px 4px;
font-size: 14px;
}
/* Labels general style */
.form-scale-table label {
font-size: 13px;
white-space: normal; /* allow wrapping */
line-height: 1.3;
display: inline-block;
word-break: break-word;
}
/* Side labels: make them wrap neatly */
.form-scale-table td:first-child label,
.form-scale-table td:last-child label {
display: block;
text-align: center;
font-weight: 600;
max-width: 65px; /* enough width to force wrapping */
margin: 0 auto;
line-height: 1.3;
word-wrap: break-word;
}
/* Radio size */
.form-scale-table input[type="radio"] {
width: 18px;
height: 18px;
}
/* MOBILE VIEW */
@media screen and (max-width: 600px) {
.form-scale-table th,
.form-scale-table td {
padding: 4px 2px;
}
.form-scale-table label {
font-size: 11.5px; /* smaller text, still readable */
}
.form-scale-table td:first-child label,
.form-scale-table td:last-child label {
max-width: 55px;
font-size: 12px;
}
/* Make table responsive without cutting off content */
.form-scale-table {
width: 100%;
}
}
/* Very small screens */
@media screen and (max-width: 400px) {
.form-scale-table label {
font-size: 10.5px;
}
.form-scale-table td:first-child label,
.form-scale-table td:last-child label {
max-width: 48px;
}
.form-scale-table th,
.form-scale-table td {
padding: 3px 1px;
}
}
Give it a try and reach out again if you have any other questions.
Once you share the form URL with us, we’ll be able to help you better with this.