I have 3 display issues that occurs on all of my chats on mobile device. My mobile is Samsung Galaxy S22 Ultra, so it is relatively new.
The issues are circled in red in the below screenshot
Issue 1: A copy button displays on all the chats under the introduction. How do I remove it?
Issue 2: I have 3 ice breakers for each chat. They all get cut off on mobile view and only view correctly on desktop.
Issue 3: The greyed out text in the chatbox area for the user to type always just runs off in a straight line and cuts off and doesn’t auto fill into the space so they can read it all.
Hi @clevra ,
Thank you for reaching out and for sharing the screenshot.
Regarding the copy button, currently, there is no built-in ability to hide this, but it can be removed with a small custom script. You can add that custom script to the Website Code Injection feature located in the Settings of your Studio. Here is the guide that explains how to do this, and you can paste the snippet directly from there:
For the ice breakers that appear cut off on mobile: the underlying layout is responsive, but when the introductory message is long, the third ice breaker can sit behind the chat input area on smaller screens. It is still accessible by scrolling upward within that section. The only way to change this behavior at the moment is by applying a custom script to adjust the spacing and wrapping. Here are a few community forum posts that may be helpful for customizing this.
Alternatively you can try shortening the introductory message so that all icebreakers have enough space to fit on the mobile screen.
For the grey placeholder text in the input box not wrapping correctly: this appears to be a display bug in the mobile placeholder styling. I will report this to our engineering team so they can review the behavior. Thank you for flagging it. We will update you once we have more information or a fix in place.
Thanks so much Danny. I was able to fix the copy icon issue with your instructions. But I don’t know where to paste the code for the icebreakers to scroll on mobile. When I pasted it in header it showed the code on my site. Can you please tell me where to paste this code?
Hi @clevra,
Thank you for the update. I’m glad to hear the copy-button script worked.
To apply the icebreaker code correctly, you can paste it into the Footer section of your Website Code Injection if the copy-button script is already in the Header or vice versa.
Hi @clevra ! thanks for pasting it verbatim (that helps a lot). You’re not doing anything “wrong” the issue is how it’s being pasted + where it’s being pasted.
First thing’s first: That snippet is CSS, so it must be wrapped in a <style> tag
If you paste into footer as just plain ol text the browser won’t apply it unless it’s inside a style block.
If you can post a screenshot of the icebreakers area with DevTools open (or even just the element HTML snippet from Inspect), I can rewrite the selector so it matches your exact layout.
Also: are you using Script embed or Iframe embed? That changes the DOM wrapper and is often the reason this exact selector doesn’t hit.
Hi @carsondev thanks for your response. Sorry but I am really struggling to understand what you are asking as this is all like another language to me. Yes I do have the style tag inserted, chatgpt showed me to do that. I just pasted it in the footer. I am just a basic user so I haven’t done anything else to my pickaxe other than add in this coding in this chat and a cookie code
To clarify what Carson was asking: whether you are viewing the Pickaxe directly on the Studio page or embedding it on an external website. Different embed methods can change how the layout behaves, which affects whether a given CSS snippet applies correctly.
If you’re able to share a link to the Studio where you’re applying this code snippet, we can take a closer look at the setup and better understand what’s happening.
Hi @danny_support thank you for clarifying. I am using it directly through pickaxe studio only. The studio I need it applied to is My Spirit Guide. I pasted it in the footer section. Thank you for taking a look. Do you guys plan on making a drag and drop builder for the studios in the future? That would be really helpful for people who aren’t into development. It is really challenging trying to create a nice homepage using code.
Thank you for sharing the specific Studio. I went ahead and applied the code snippet, and the icebreakers should now appear like this:
The earlier snippet was not taking effect because the layout for icebreakers changes slightly depending on whether an intro message is present. In your case, the intro message caused a different wrapper to be used, so I adjusted the selectors to account for that scenario.
I am pasting the updated version below in case it is helpful for you or other users who run into the same behavior.
Make icebreakers horizontal and scrollable when an intro message is present:
Thanks @danny_support That worked however it doesn’t scroll all the way down on most of my chats to see the whole icebreaker. The chat box area covers it, I have attached a screenshot. This could be because my text in the chat box is longer in some chats, but I need it longer. Can you please tell me how to fix this? Also, do you have any idea on how long until they fix the chat box text so it displays the entire text?
<style>
/* Mobile-only: make icebreakers scroll horizontally when an intro message is present */
@media (max-width: 600px) {
/* 1) Give the scrollable chat area enough bottom padding so content never sits under the fixed input */
.flex.w-full.flex-col.items-center.overflow-y-auto.mb-12.pb-4 {
padding-bottom: 60px !important; /* increase/decrease if needed */
margin-bottom: 0 !important;
}
/* 2) Tighten intro message spacing so the icebreakers have more room */
.grid.grid-cols-1.gap-y-6.w-full {
gap: 12px !important;
}
.chat-message.pt-3 {
padding-top: 6px !important;
}
img.my-3 {
margin-top: 6px !important;
margin-bottom: 6px !important;
}
.flex.flex-col.gap-6.my-4 {
gap: 12px !important;
margin-top: 8px !important;
margin-bottom: 8px !important;
}
/* 3) Icebreaker wrapper */
.flex.flex-col.items-end.gap-2 {
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
max-width: 100vw !important;
padding: 0 8px 12px 8px !important;
scroll-behavior: smooth !important;
-webkit-overflow-scrolling: touch !important;
margin-bottom: 12px !important;
padding-bottom: 12px !important;
}
/* Each icebreaker pill */
.flex.flex-col.items-end.gap-2 > .relative.text-sm.group {
flex: 0 0 auto !important;
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
}
/* Disable backdrop blur to prevent blurry text */
.flex.flex-col.items-end.gap-2
> .relative.text-sm.group
> .absolute.inset-0.backdrop-blur-md {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Optional: subtle scrollbar */
.flex.flex-col.items-end.gap-2::-webkit-scrollbar {
height: 4px !important;
}
.flex.flex-col.items-end.gap-2::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2) !important;
border-radius: 2px !important;
}
}
</style>
If you create Pickaxes with even longer intro messages in the future, you can further fine-tune the spacing by increasing/decreasing the bottom padding value in this line of the code: padding-bottom: 60px !important; /* increase/decrease if needed */
Please note that while we’re happy to help troubleshoot and point you in the right direction, we’re not able to continue writing or customizing CSS beyond this. If you’d like deeper or ongoing customization, I recommend hiring a Pickaxe Expert, who can tailor the styling exactly to your needs: Pickaxe Experts
Regarding the placeholder text in the chat box not wrapping correctly, this has been reported to our engineering team and is currently on their to-do queue. Once a fix is released, I’ll be sure to follow up and let you know.
Hi @danny_support Thank you so much for all your support. Sorry I didn’t realise that this kind of coding in the studio wasn’t supported and thought these were bugs in the display. I really appreciate all your help with fixing this.
The issue with the placeholder input text not wrapping has been resolved. The remaining styling concerns mentioned in this thread have also been shared with our team. Thank you for your patience and for helping us improve the platform.
