Floating feedback button covers up some of buttons on mobile

  • 91devco
    Asked on April 16, 2019 at 4: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)

  • Alan_D
    Replied on April 16, 2019 at 6:46 PM

    You can try to change the button position. Please look at this.
    1555454718bandicam20190417014241649 Screenshot 10This is how it looks.
    Floating feedback button covers up some of buttons on mobile Image 21

  • 91devco
    Replied 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?

  • AndrewHag
    Replied on April 17, 2019 at 1:12 AM

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

    1555477854chrome Ds3uw5btvh Screenshot 10

    And this is how it looks on the mobile.

    1555477912chrome SU5hF87Cf4 Screenshot 21

  • 91devco
    Replied 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?

  • Kiran Support Team Lead
    Replied on April 17, 2019 at 2: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!

  • 91devco
    Replied on April 17, 2019 at 4: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!

  • jherwin
    Replied on April 17, 2019 at 6: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.

  • 91devco
    Replied on April 17, 2019 at 6:54 PM

    thanks! where exactly do i put that code?

  • jherwin
    Replied on April 17, 2019 at 8: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.

  • 91devco
    Replied on April 17, 2019 at 9:04 PM

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

  • jherwin
    Replied 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