Are media Queries ignored in Form Designer?

Hi, 

I wanted to add some media-queries for iPad in Portrait mode to a form, but they seem to be ignored. 

Those are the rules that should trigger: 

@media only screen and (device-width:768px) and (orientation:portrait) 

The result however is, that the trigger is ignored and the rules defined inside that block are applied to the whole page. 

Is it maybe because nesting is not allowed in your editor? 

e.G. 

@media.... {

#some {

..

}

#rule {

.. 

}

}

What can I do to get around this? 

I have to load them from within your form as rules that I define natively are not applied due to the same origin policy (I can not define things in an iFrame from another domain).

best regards,

Jan Mueller 

PS: I can't give a screenshot as nothing can be seen & the page I have it on is still private, I think the owner would not want me to give you the credentials. 

The form I am using is this one: http://www.jotform.com//?formID=52123330739348

Yes it is possible to use @ rules on inject CSS like media queries and font-face.

I checked your form and your media query does not seem to have any css codes under it. Kindly recheck.

Also, I would suggest to add your CSS codes on the CSS tab while on the form designer. Then preview your form using the available previews when you hit the save button. The "device-width" might require actual device before you can see the changes. If in case some declarations on your CSS codes are overpowered, try to use !important directive, this should help.

If you need further assistance, please let us know.

Hello, 

That's what I did.. 

Have a look: 

syntax = OK. 

When I save and go back, then go to the CSS editor again, it's broken as the editor moved the closing bracket (see below:)  

Our designer will place your code within its own codes, and will try to parse it to the best of its capability. Having that said, it should still work, but maybe there is some glitch that makes it not work properly - in which case our developers will be happy to look into it.

What I would suggest is to check if you can add the styles in the following manner (this is how I personally add them to any forms): Inject Custom CSS Codes

The important thing here, is to add your own CSS all the way down, under all the other styles, and doing it as such, should save them properly.

Do test it out and let us know how it goes.

Thanks for the workaround, Ben! 

I got it to work this way.