-
albergo_infoDomanda del 17 marzo 2021 alle ore 10:08
Hello, I created this form but on my Iphone 12 Pro i see correctly the radio buttons like a small keyboard
However on other smartphones (eg. iphone X and Iphone SE) the buttons are displayed vertically, taking a lot of space. Could you help me to find a way to keep the same aspect for any display?
Thank you
Matteo
Page URL: https://form.jotform.com/210735906049053 -
Kevin Support Team LeadRisposta del 18 marzo 2021 alle ore 18:58
Puedes cambiar la forma en que se muestran los botones con el siguiente paso:
@media screen and (max-width: 480px){
.wrapperButtonRadio{
width: 30% !important;
}
}
La siguiente guía te ayudará a ingresar el código a tu formulario: https://www.jotform.com/help/428-how-to-inject-css-codes-to-widgets
Espero esto sea de ayuda.
-
albergo_infoRisposta del 19 marzo 2021 alle ore 10:11
Dear Kevin,
thank you for your reply. It partially works. The buttons are thinner but on Iphone 12 Pro the box is not centered in the middle of the screen and the arrow showing the selected answer is not centered to the middle of each button.
On iPhone X insead, a wide empty space appears between two questions. Do you have a way to make everything fit and nice?
We are going to buy the monthly subscription in 2-3 weeks, therefore I wanted to make sure that the form is set and nice.
Thanks
Querido Kevin,
Gracias por su respuesta. Funciona parcialmente. Los botones son más delgados, pero en el Iphone 12 Pro el cuadro no está centrado en el medio de la pantalla y la flecha que muestra la respuesta seleccionada no está centrada en el medio de cada botón.
En el iPhone X, a continuación, aparece un amplio espacio vacío entre dos preguntas. ¿Tienes una forma de hacer que todo encaje y sea agradable?
Vamos a comprar la suscripción mensual en 2-3 semanas, por lo tanto, quería asegurarme de que el formulario esté configurado y sea bueno.
Gracias
-
Andrew Manager of Enterprise Frontline SupportRisposta del 19 marzo 2021 alle ore 15:57
Hello there,
Thank you for the follow-up! I just cloned your form and did some testing, and was unable to reproduce the padding issue on my iPhone X. I just cleared your form cache in hopes that this will resolve the issue on your end as well. Please let me know if you continue to experience this display issue on your iPhone.
As for the numbers on each button not being centered over the selector icon, I was able to resolve this by making a quick change to the CSS previously provided by my colleague. Please replace the existing CSS on these widgets with the following:
@media screen and
(max-width: 480px){
.wrapperButtonRadio{
text-align: center
width: 30% !important;
}
}
Please reach back out with any additional questions or issues, and have a great day!
-
albergo_infoRisposta del 19 marzo 2021 alle ore 21:05
Thank you, I managed to solve everything. Using
@media screen and
(max-width: 480px){
.wrapperButtonRadio{
text-align: center
width: 30% !important;
}
}
#radio-container {
text-align: center;
}
.radios.black input.checkedButtonRadio + label {
color: black !important;
background: lightgreen !important;
}
I have one last question though...as you can see there is a lot of space between the collapsable bars. How is it possible?
How can I solve this?
Thank you
-
Lorenz Jotform SupportRisposta del 19 marzo 2021 alle ore 21:33
Hi there,
Please allow me some time to check your form and I'll get back to you via this ticket with an update.
Thank you.
-
Lorenz Jotform SupportRisposta del 19 marzo 2021 alle ore 21:47
Hi,
Please add the code below into your form.
ul.form-section:not(.page-section) {
display: none !important;
}
Guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes
I hope this helps. Let us know if you need any further assistance.
-
albergo_infoRisposta del 19 marzo 2021 alle ore 21:53
Thank you for the try. It does not work. The layout looks good but the collapsable bars do not work anymore
Matteo
-
Lorenz Jotform SupportRisposta del 19 marzo 2021 alle ore 21:54
Hi,
Apologies, please disregard the code I provided above.
You may try this code instead.
ul.form-section:not(.page-section) {
margin: 0 0 !important;
}
Thank you.
-
albergo_infoRisposta del 19 marzo 2021 alle ore 21:55
Yes Lorenz! Now it works! Great...I'm very thankful...Jotform rocks!