https://discord.gg/botpress logo
Powered by
Phone view, with bot on left side
# 🤝help
c
When I enter the client web on phone the bot placement is weird. The bot I set to the left side but I does not cover the entire site like it usually does when the widget is on the right side. Anyone know how to fix? https://cdn.discordapp.com/attachments/1496534709679816856/1496534710934048899/IMG_0568.jpg?ex=69ea3c0f&is=69e8ea8f&hm=779d0025be9a67c08736f9ed5add34effc0ea51570d807f8aa6b39753c76d19f&
How it looks when it’s on the right side
Centered
l
have you tested different browsers?
w
could be the section where you installed the botpress script
c
.bpFabWrapper { left: 20px !important; right: auto !important; } .bpWebchat { left: 20px !important; right: auto !important; } .bpFabContainer { left: 20px !important; right: auto !important; } .bpFabContainer { left: 20px !important; right: auto !important; }
#bp-web-widget-container { left: 20px !important; right: auto !important; }
the button starts on the right side and jumps to the left
@wide-umbrella-5226
can u take a look
its at jimrickey.com
l
are you only using safari?
c
Considering 99% of customers use safari when browsing, yess
l
very fair
but for testing purposes
does it work or look fine
on chrome?
c
No, it jumps on chrome as well
From right to left
Take a look
l
c
yea u see it
its not centered
and when opening the site, it jumps from the right to the left instead of just starting from the left
l
Yeah asking for help
c
#bp-web-widget-container { left: 20px !important; right: auto !important; } @loud-crowd-60573 i fixed the jump issue by putting this code at the top right after head
Any updates on the issue? @loud-crowd-60573 . The left view issue
l
I thought you had the fixed the issue! Was I mistaken?
c
Only the right to left issue, the chatbot container placement is still weird
l
Is this on all your bots? Or just the one
Also drop the the bot ID of this bot too please
Mr Claude will help
c
b70eb3c5-314b-492e-b78a-789d219d2bc0
only on this one, because it also the only one i use on the left side
l
@curved-easter-40611 let me knwo if this works
This moves the widget to the left side of the screen, but the chat window itself has a fixed width. On mobile, that fixed width overflows past the right edge of the viewport — hence the cutoff. The fix: The user (or their developer "Lyno") needs to add a mobile media query to constrain the chat window width. They should update their custom CSS to something like: .bpFabWrapper, .bpWebchat, .bpFabContainer { left: 20px !important; right: auto !important; transition: none !important; } @media (max-width: 480px) { .bpWebchat { left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; } }
c
yess! it works!
thanks ross
l
The power of claude is dangerous
@wide-umbrella-5226
4 Views
PreviousNext
Powered by