How do I adjust css for responsiveness?

  • Profile Image
    Asked on March 21, 2014 at 01:56 PM

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

  • Profile Image
    Answered 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="//" frameborder="0" style="width:100%; height:457px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args =":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight" = 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 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 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
    Answered on March 21, 2014 at 06:52 PM


    Try it with source code embeddig,, 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.

    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!