Image Radio Buttons Widget Bug: Align the images top to bottom on mobile devices

In my form, there is another issue which have come up regarding responsiveness - for which I will raise another topic. This issue of this thread can be closed.

Hi,

If  I understood your question correctly. I see that your form is responsive from my side.

Can you copy and paste the code below to your CSS from Designer?

 

/*-----------RESPONSIVE LAYOUT-----------*/

 

.form-line.form-line-column {

width: 100% !important;

margin-left:0

}

.form-line{

width: 100%;    

}

.form-textarea,

.form-textbox,

.form-dropdown{

width: 100% !important;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.form-label-left, .form-label-right{

width: auto !important;

}

.form-buttons-wrapper{

margin-left:0 !important;

}

.form-input {

width: 100% !important;

}

.form-all{

width: 75% !important;

}

.form-sub-label-container {

width: 100% !important;

display: block  !important;

}

 

Here is how to do this:

1) Click on Setup & Embed. 

 

 

2) Click on Designer. 

 

 

3) Click on CSS.

 

 

4) Copy & paste the code above to CSS.

 

5) Click on save button.

 

Hope this will help. Let us know if you need further assistance.

Hi Beril,

Thanks for your answer, but this have not helped me. In the form the options are still coming in one row and the user will have to scroll sideways to see all the options. Please see the attached screenshot.

 

 

I would like that those options which are not able to come in the width of the screen should convert to row and come down, so that the user will have to scroll only vertically and not side ways. (see below modified image of this screenshot.

 

Hi,

Unfortunately, I see that, with this widget, images are not align top to bottom on mobile phone.

I forwarded it to our developers and we will inform you as soon as possible, when we solve the problem. 

If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

Hello, 

Please try the Mobile Responsive Widget.  It will help resolve the mobile responsiveness automatically for most fields: 

Also - try using a wider margin for your buttons (15%): 

Here's a copy of your form - http://form.jotformpro.com/form/52781456680968? - its not perfect, but its a good start - right? 

Let us know. 

Oops - I also re-added your CSS custom Code for animating the color and adding the circular border right below the 15% border declaration: 

.images_button_container {

      display:inline-block;

      box-sizing:border-box;

}

li div.default, li div.active {  

       background-repeat: no-repeat !important;

       background-position: center !important;

       margin: 5px   64px;

}

li div.default{

       padding: 20%;

       background-size: 75% 75% !important;

       -webkit-border-radius: 50px;

       border: 1px solid #000000;

}

li div.active{

       background-color: #fec11f  !important;

       padding: 25%;

       background-size: 80% 80% !important;

       -webkit-border-radius: 12px;

       border: 0px solid #000000;

}

Let us know if this helps. 

http://form.jotformpro.com/form/52781456680968?

Thanks

Hi,

Thanks for your support. It worked.

In behalf of my colleagues, you are welcome.

Should you need any assistance again, please do not hesitate to open a new thread here in the forum.

Thank you.

Hi,

I am happy to hear that, the problem is solved.

If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.