Floating feedback button covers up some of buttons on mobile

  • Profile Image
    91devco
    Asked on April 16, 2019 at 04:08 PM

    I really like this floating button, but on mobile, it covers up some of my floating sharing buttons...is there some coding i can add, or some other way, to raise it up just a little more from the bottom? (especially on mobile)



    This is a re-post of a comment on How to Embed a Card Form as a Floating Feedback Button?

  • Profile Image
    Alan_D
    Answered on April 16, 2019 at 06:46 PM

    You can try to change the button position. Please look at this.
    1555454718bandicam20190417014241649.gifThis is how it looks.
    15554547591.png

  • Profile Image
    91devco
    Answered on April 16, 2019 at 11:36 PM

    Thanks Alan, moving the position would probably be the easiest option, but I like it in the bottom right... I just wish it was just a bit higher...is there a way to do this?

  • Profile Image
    AndrewHag
    Answered on April 17, 2019 at 01:12 AM

    Unfortunately, it is not possible to add custom CSS codes. You can select the bottom right from the Button Position.

    1555477854chrome_Ds3uw5btvh.png

    And this is how it looks on the mobile.

    1555477912chrome_SU5hF87Cf4.png

  • Profile Image
    91devco
    Answered on April 17, 2019 at 12:17 PM

    thanks. is it possible to have it in one location on desktop and a different location on mobile using the regular css?

  • Profile Image
    Kiran
    Answered on April 17, 2019 at 02:45 PM

    It may be possible to add the CSS code to your web page to change the position of Feedback button. We may be able to check this further if you can provide us with the web page URL where you have embedded the form.

    Thanks!

  • Profile Image
    91devco
    Answered on April 17, 2019 at 04:26 PM

    sure...my site is www.surfgroundswell.com ... the position on desktop is fine, it's the position of the button on mobile that concerns me...on mobile, you'll see some floating share buttons covered halfway by the form button...thanks so much!

  • Profile Image
    jherwin
    Answered on April 17, 2019 at 06:33 PM

    Try adding this to your webpage:

    button#JF_feedback_embed_91006972046152_6964_button {
        top: 630px;
    }

    Please give it a try and let us know how it goes.

  • Profile Image
    91devco
    Answered on April 17, 2019 at 06:54 PM

    thanks! where exactly do i put that code?

  • Profile Image
    jherwin
    Answered on April 17, 2019 at 08:35 PM

    Try to change the embed code with this:

    <script src="https://form.jotform.com/cardforms/feedbackEmbedButton.min.js"></script> <script> new JF_FeedbackEmbedButton({ buttonText: "Bring GroundSwell to you!", buttonFontColor: "#FFFFFF", buttonBackgroundColor: "#0071BC", buttonSide: "top", buttonAlign: "right", buttonIcon: "default", formId: 91006972046152 }); 
    </script> 
    <style>
    button#JF_feedback_embed_91006972046152_6964_button {
        top: 630px;
    }
    </style>

    Let us know how it goes.

  • Profile Image
    91devco
    Answered on April 17, 2019 at 09:04 PM

    thanks, it didn't work...now the button has disappeared :(

  • Profile Image
    jherwin
    Answered on April 17, 2019 at 10:44 PM

    Sorry about that, please revert the embed code to default and then put this code 

    button#JF_feedback_embed_91006972046152_6964_button { top: 630px;
    }

    inside the style section in your webpage:

    <style type="text/css">
    button#JF_feedback_embed_91006972046152_6964_button { top: 630px;
    }
    </style>

    Please refer to this similar thread if you still can't find the syle section on your webpage.

    https://www.jotform.com/answers/77735