How do I adjust css for responsiveness?

  • Profile Image
    Erik
    Asked 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?

  • Profile Image
    Carina
    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="//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
    localpinpoint
    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
    localpinpoint
    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
    EltonCris
    Answered 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!