What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Are media Queries ignored in Form Designer?

    Asked by reibejoy 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

    media queries CSS Form Designer
  • Profile Image
    JotForm Support

    Answered by EltonCris 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

    Answered by reibejoy 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

    Answered by Ben 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

    Answered by reibejoy on August 12, 2015 at 04:18 AM

    Thanks for the workaround, Ben! 

    I got it to work this way.