Hide feedback on mobile device

  • Profile Image
    Luke
    Asked on October 23, 2014 at 08:23 PM

    Hi there,

    I have managed to get the feedback button to work on my website, however am wanting to hide it on mobile devices. I normally do this by giving script a <div id> and then hiding it at certain screen res in the CSS (e.g. @media (max-width: 767px) {#Book {display: none;}})

    However, this does not appear to be working with the jotform feedback button. Can you give me any tips to try?

    Website is www.vitalisepsychology.com.au

    Luke

  • Profile Image
    Charlie
    Answered on October 23, 2014 at 09:09 PM

    Hi Luke,

    I'm trying to find a solution for your concern, but unfortunately I'm unable to find a working one. But same idea that I have with yours.

    Using this code:

    @media screen and (min-width: 200px; max-width: 4000px) {

      {

      button#input_2.form-submit-button { display:none;}

      }

      }

     

    Which I placed between the <head> elements with a <style> on it. Don't mind the values, I'm trying to hide elements in different width size.

    We can also try to hard code it on the actual source code of the form, but I'll need to check how I can do this first. I'll get back to you when I have a working solution for this. For now you can explore other codes to use. 

    Regards.

  • Profile Image
    Hendo07
    Answered on October 23, 2014 at 09:41 PM

    Thanks for your prompt response. Please let me know if you can find a way to make this work.

    In the meantime I have removed the feedback and instead put in a lightbox. I was wondering if it is possible to remove the scroll bars (horizontal and vertical)? You can see what I mean by visiting www.vitalisepsychology.com.au and clicking on Book Appointment Now

  • Profile Image
    Charlie
    Answered on October 23, 2014 at 11:25 PM

    Hi,

    This code works for me.

    When the min-width is 0px and the max-width is 400px of a screen, the button will be hidden.

    @media screen and (min-width: 0px) and

    (max-width: 400px)

    {

        .form-submit-button {

            display : none;

        }

    }

     

    But I added it in the new JotForm Form Designer, under the CSS panel.

     

     

    It works on the standalone link of the form, but I haven't tried it when embedded to a website. Please do try if this works and let us know. 

    For the other issue, I'll try to look at it and we'll let you know when I have found a solution.

    Thank you.