Are media Queries ignored in Form Designer?

  • Profile Image
    reibejoy
    Asked on August 11, 2015 at 06:43 AM

    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

  • Profile Image
    EltonCris
    Answered on August 11, 2015 at 10:29 AM

    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.

  • Profile Image
    reibejoy
    Answered on August 11, 2015 at 11:41 AM

    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:)  

  • Profile Image
    Ben
    Answered on August 11, 2015 at 01:39 PM

    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.

  • Profile Image
    reibejoy
    Answered on August 12, 2015 at 04:18 AM

    Thanks for the workaround, Ben! 

    I got it to work this way.