Embedded form disappears if browser window is resized to a small view.

  • Profile Image
    wyattdesigns
    Asked on June 07, 2017 at 03:17 PM

    Hi. I have embedded a form into my muse website. The website has breakpoints, but the form is not showing up in the smaller breakpoints. It shows up and functions properly in the larger breakpoints.

  • Profile Image
    BDAVID
    Answered on June 07, 2017 at 04:32 PM

    I see you have embedded your form in divs, which class is called "Breakpoint":

    The reason why the form disappears whey the windows is resized is because of the CSS rules that have been applied to the div where you have embedded your form, which are meant to show only size bigger than 961px:

    @media (min-width: 961px), print

    dmt-paymentpayp…c=4025525533:1

    #bp_infinity.active {

        display: block;

    }

    You need to contact your website designer to change that, or embed the form outside those "breakpoints" to stop affecting the form. Let us know if you have more questions.

  • Profile Image
    wyattdesigns
    Answered on June 07, 2017 at 11:49 PM

    I am the website designer. How do I change that?

  • Profile Image
    ashwin_d
    Answered on June 08, 2017 at 02:53 AM

    Hello wyattdesigns,

    Here are the steps you need to follow:

    #1. Edit the following css file:  "dmt-paymentpaypal.css" which is under css folder of your website.

    #2. Find the following css code entry:

    #bp_infinity.active{display:block;}

    and replace with the following code:

    #bp_infinity.active{display: inline !important;}

     

    #3. Edit the following css file:  "site_global.css" which you will find under css folder of your website.

    #4. Find the following css code entry:

    .popup_element.Inactive,.js .disn,.js .an_invi,.hidden,.breakpoint{display:none;}

    and replace with the following code:

    .popup_element.Inactive,.js .disn,.js .an_invi,.hidden,.breakpoint{display: inline !important;}

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image
    wyattdesigns
    Answered on June 08, 2017 at 12:14 PM

    I don't know how to access the css in Muse. So, are your forms not responsive anymore? How can I just make it to where it will show up as it is from Jotform?

  • Profile Image
    ashwin_d
    Answered on June 08, 2017 at 01:49 PM

    Hello wyattdesigns,

    Please note that JotForm is mobile responsive. In your case, the issue is not related to form but the container of your website where you have embedded your form. The css code is causing the content of the container not to be displayed if the width is smaller than 961px. 

    If you are unable to edit the css code, are you able to edit the webpage where you have embedded your form? Please change the value of data-min-width="961" to a smaller number and see if that solves your problem. Please check the screenshot below:

    Thank you!