How to adjust Facebook Messenger icon size and position on my website?

[shells]

Hi all, 

I've added the Facebook messenger icon but it is blocking the scroll up button (grey round button underneath) I have. How can I stack it on top of the scroll up button? And how can I make the Facebook message icon the same size as the scroll up?

Thank you! my website is www.feyrebaby.com.au

[Akibhusen · Accepted solution]

Hi,

Please add the below code of CSS at the end of your theme.scss.css file. You can find this file in the assets folder of your theme.

.fb_dialog_content iframe{
	right: 65px !important;
	bottom: 1.5vh !important;
}
.js-back-to-top{
	right:20px !important;
}

[Hardik29418]

@shells 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

.fb_dialog_content iframe {
bottom: 16% !important
right: 0% !important;
}

[shells]

Hi @Hardik29418 Unfortunately this doesnt work. Can you help me take a look at it again? Thank you!

[Hardik29418]

@shells It seems that you have not placed my code in the right place. Please check again.

[shells]

I have. I think there is something wrong with the code. It messes up my website. 

[Akibhusen · Accepted solution]

Hi,

Please add the below code of CSS at the end of your theme.scss.css file. You can find this file in the assets folder of your theme.

.fb_dialog_content iframe{
	right: 65px !important;
	bottom: 1.5vh !important;
}
.js-back-to-top{
	right:20px !important;
}

[shells]

Still the same. Icon size it still bigger than the scroll up and they are still stacked over each other. 😞

[Akibhusen]

Hi @shells ,

Just try my code which I have given above.

[shells]

ok works now!! Thank you

but the Facebook Messenger Icon is still much bigger than the go to top icon. Any way to shrink it?

Thanks!

[Akibhusen · Accepted solution]

Hi,

JFI, We can not add the CSS in the Iframe content.

The Facebook chat icon is available inside the Iframe so CSS does not work.

[ZestardTech]

Hello There,

1.
In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

.fb_dialog.fb_dialog_advanced .fb_dialog_content iframe.fb_customer_chat_icon {
right: 3px!important;
bottom: 65px !important;
}