-
art_crateAsked on January 6, 2015 at 6:07 AM
-
CharlieReplied on January 6, 2015 at 10:57 AM
Hi,
You can try injecting Custom CSS codes width media query declarations on them inside your form using the Form Designer. You can follow the example below. I've setup a form with an Image Radio Button widget, here's my sample form http://www.jotform.com/form/50048241729958
We can use media query to apply when the size of the screen is at least 500px and above.
@media (min-width: 500px){
#customFieldFrame_5 {
width : 600px !important;
height: 100px !important;
}
}
Media query to apply when the size of the screen has a max size of 400px for mobile devices.
@media (max-width: 400px){
#customFieldFrame_5 {
width : 300px !important;
height: 400px !important;
}
}
The #customFieldFrame_5 is the id for the specific widget, you can find it by following the screenshot below.
1. We want to find the ID of the widget. View your form and right click on the widget, choose "Inspect Element".
2. Find the iframe that is associated with the widget, right click and choose "Copy CSS path".
3. Open your Form Designer, navigate to the CSS tab and paste the copied CSS path inside the media queries.
4. In my virtual environment, when the form is viewed on a mobile device with a width of 400px and less, the size of the widget will display in this view.
5. When the display is 500px and larger it will line up in horizontal.
I hope this helps or at least gives you an idea on how to proceed.
Thank you.