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

    How do I adjust css for responsiveness?

    Asked by Erik on March 21, 2014 at 01:56 PM

    I am having overlapping issues with a sidebar form on www.dlalicata.com How/where do I make alterations for css and or responsive fit?

    Page URL:
    http://www.dlalicata.com

    sidebar www and or and
  • Profile Image

    Answered by Carina on March 21, 2014 at 04:20 PM

    You can change the iframe's width from 100% to 180px, and then you can paste this code in your website:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.co/form/31706318528859?wmode=transparent" frameborder="0" style="width:100%; height:457px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Let us know if the problem persists.


  • Profile Image

    Answered by localpinpoint on March 21, 2014 at 05:50 PM
    The overlap go worse with that code. The overlap is not in the width but in the height.


    ...
  • Profile Image

    Answered by localpinpoint on March 21, 2014 at 05:50 PM
    I apologize. I pasted the entire code with js. It is responsive but it still overlaps the other divs.

    ...
  • Profile Image
    JotForm Support

    Answered by EltonCris on March 21, 2014 at 06:52 PM

    @localpinpoint

    Try it with source code embeddig, http://www.jotform.com/help/104-How-to-Download-a-Source-Code-of-your-Form, this might help. If not, try the following.

    --

    You can also adjust your media query CSS to prevent the form from overlapping the other div elements.

    I believed this needs to be adjusted on this stylesheet.

    http://www.dlalicata.com/wp-content/themes/dlalicata2/style.responsive.css?ver=3.8.1

    Specifically on this line. You may increase the initial bottom padding for the sidebar where the form is placed.

    .responsive .art-responsive-embed {

       position: relative;

       padding-bottom: 56.25%;

       /* 16:9 */

    height: 0;

    }

    Hope this helps!