I need help on mobile
# 🤝help
g
My chatbot works perfectly on pc, but I want to make it smaller on mobile cause it hides all my website
f
Maybe you could do some css?
b
Hello you must do it manually in the meantime, if you know CSS you can modify the css in the integrations part, that was the way I could do it, also if you integrate it with the "Configurable" you can add some properties such as height and width of the chatbot window. Those would be the two ways that I think it can be done
g
Yes I knew it but I don't know CSS
b
/* Styling for the layout of the chat bubble. Width, height, border, position and radius of the chat bubble */ .bpw-layout { width: 360px !important; height: 70vh; border-radius: 10px; right: 10%; bottom: 5%; border: 1px; } /* Responsive design rules for devices with width less than or equal to 767px */ @media screen and (max-device-width: 767px) { .bpw-layout { width: 100% !important; height: 100%; right: 0; bottom: 0; border-radius: 0; } }
this is the part of the css where you can modify height and width
here you can get an explanation about this file
g
Thanks bro!
d
hello bro where do i like paste this code? in my website css or where I am confused with same issue
b
Hi Shery, First go to the integrations part in the main menu of the workspace, then go to Stylesheet URL to go to the part to set the style of the chatbot, on the left side you have two options, in Advanced Styler you can go configuring, if you do it this way you do it from scratch, although you can also do it in the first option Style your Bot, you do the basic configurations and generate the link at the end, then go to where that link takes you, copy all that css and then go to Advanced Styler and delete what is there and copy the one that was previously generated, for the chatbot sample to change in this part remember to hit Run at the top, and here you will have a base and you can search the kind of css you want to modify, always remember to hit run to see the changes in the chatbot on the right
the link you generate is placed in the integrations section in the input where the Stylesheet URL is located.
d
thank u so much bro, ok so whatever I want to make changes i have to do it in the advance styler and i dont need to go anywhere else
b
remember to click on Run at the top to see the modifications you have made in the chatbot on the right side.

https://cdn.discordapp.com/attachments/1138527569512243240/1142848579615080508/1.jpg

https://cdn.discordapp.com/attachments/1138527569512243240/1142848579971592283/2.jpg

https://cdn.discordapp.com/attachments/1138527569512243240/1142848580244226068/3.jpg

of course remember that you can also overwrite some things already in your application with a local css by placing the class that you know controls some element of the chatbot, although you must place the !important tag to overwrite the css you generated.
and so you don't have to go back to set something in the advanced styler, but I recommend that you modify it from the advanced styler and the modifications of some class already in the css of the application is minimal.
the advanced styler css has comments that help a lot to locate the element that you are modifying, remember to always keep changing and hit run to see what happens to the chat on the right.
d
thanks bro I am able to reach here and edit out but still can't figure out what code to edit for mobile screen like what should the number be i tried everything still it wont work on mobile ( /* Responsive design rules for devices with width less than or equal to 767px */ @media screen and (max-device-width: 767px) { .bpw-layout { width: 100% !important; height: 100%; right: 0; bottom: 0; border-radius: 0; }
bro i got it fix it was the website issue
86 Views