Messenger Icon Ovelaps with bottom menu on mobiles

  • Resolved uidb4056

    (@uidb4056)


    4 years, 1 month ago

    Hello,
    I’ve installed Facebook Chat plugin on a WooCommerce site and I’m using Storefront theme.
    It works OK on Desktop , but if I use Mobile or Tablet size the Icon overlaps the bottom Storefront Menu for Mobile or Tablet showing User button, Search button, and Cart button.
    How can I customize to show the Messenger Icon on these layouts to appears upper these buttons?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • I have the same setup and the same issue. I can imagine that we have to change the css-style, I changed the margin from 0 to 60 but I don’t know where the file is located on so to edit it.

    On the browser’s inspect element I did it, have a look here: https://ibb.co/BfFzSjh

    Could anyone help on this?

    Finlay after a research I’ve made on the community I found that you can add this style code on your child theme’s css or additional css via the theme customization.

    It worked perfectly.

    /*FB messenger display position*/
    .fb_iframe_widget iframe {
    margin-bottom: 45px !important;
    height: 10px;
    }
    iframe.fb_customer_chat_bounce_in_v2 {
    max-height: calc(100% – 125px) !important;
    min-height: 550px !important;
    }
    .fb_dialog_content iframe {
    right: 11px !important;
    margin-bottom: 45px !important;
    }

    Thread Starter uidb4056

    (@uidb4056)

    Many thanks,

    It works!!!!

    joni0808

    (@joni0808)

    Hi,

    Could you could please help, to move the messenger icon to the left side.

    Thank you!

    Regards,

    atr0x

    (@atr0x)

    Hi there, could you please share a link to the domain you want to fix this?

    ckov1

    (@ckov1)

    /*FB messenger display position*/
    .fb_iframe_widget iframe {
    margin-bottom: 45px !important;
    height: 10px;
    }
    iframe.fb_customer_chat_bounce_in_v2 {
    max-height: calc(100% – 125px) !important;
    min-height: 550px !important;
    }
    .fb_dialog_content iframe {
    right: 11px !important;
    margin-bottom: 45px !important;
    }

    code is work , perfect ,

    thanks mate ??

    joni0808

    (@joni0808)

    Amazing! Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Messenger Icon Ovelaps with bottom menu on mobiles’ is closed to new replies.