Radio buttons responsive to smartphone screen

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

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.

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

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!

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

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.

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.

Thank you for the try. It does not work. The layout looks good but the collapsable bars do not work anymore

Matteo

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.

Yes Lorenz! Now it works! Great...I'm very thankful...Jotform rocks!