Shopify Inbox - Move chat button up to avoid overlap with mobile toolbar

[EarthArt]

Yesterday I installed Shopify Inbox, and so far like it a lot. I do have one issue however with it when it comes to the integration in my webshop (www.earthart.nl). In the mobile version of the webshop the Shopify Inbox chat button overlaps with the sticky mobile toolbar, hiding the search button. Can someone point me in the right direction (preferably with some code and the liquid file that needs to be adjusted) to move the Chat button up by an x number of pixels? Thanks for your help!

[oscprofessional]

@media only screen and(max-width:768px){
iframe#ShopifyChat {
    bottom: 59px !important;
    right: 0 !important;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->pre_theme.min.scss.liquid

[EarthArt]

Thanks for your reply! I tried below solution, but it doesn't seem to help. The button is sill at the same place after placing your code in the mentioned file. As it's quite straightforward, do you have any clue what could be wrong?

[Cartli]

Hey!

Did you solve this problem? I'm facing the similar problem and tried fixing it with css, it works on mobile view from desktop chrome developer tools but does not work on actual mobile.

[LilithJo]

Based on the dawn theme, add code under base.css[shopify inbox]

/* Adjust the position of the dummy-chat-button-iframe on small screens /inbox*/
@media only screen and (max-width: 768px) {
iframe#dummy-chat-button-iframe[src="about:blank"] {
position: fixed !important;
bottom: 135px !important;
right: 10px !important;
z-index: 1000 !important;
height: 68px !important;
width: 160px !important;
}
}

PS:Thanks to gpt's help, I made many ID attempts after reviewing the id and it worked afterwards. My half-assed html skills solved the problem.

[ladytings]

This worked for me. Thanks !