Mobile with overlap content


#1

Hello, to all

I have done a small intranet site to chat, and in computer and tablet works very well but in mobile the chat form overlaps in the page, can someone help me please?

SITE

There is a foto of safari in reactive mode:

But in real what happened is:

Thank you in advance…


#2

@Eldar Good night,
Do you have any idea for what I’m doing wrong?
Thank U.


#3

Hey Pedro,

I did try to open your webpage on my phone, but like I told you last time in my email, for some reason, your site is not accessible in my country.

I was able to open your site on my desktop using the VPN, and checked how it looks in mobile like browser size. It looks perfectly fine there.


#4

Strange,

But there you have the .bloc and the HTML folder with the assets.

So if you can please check

.CDC.bloc.zip (222.3 KB)
CDC - HTML.zip (2.1 MB)

Only missing the video background…


#5

OK,

I have downloaded the HTML files and uploaded it here: https://eldargezalov.com/i/pedro


#6

Thank you, can you see it now that the content is overlapped?


#7

Well, for me the part with form is not loading at all. I tried to check your bloc file, but no luck there as well. Not sure what’s wrong.


#8

I know, the chat is my server, so you probably can’t reach it too.
I don’t know if you have a cpanel with softaculous, but if yes, the chat is live helper chat.

And in the admin page you have the code for widget integration.

or probably in the blocs you can see if there is something wrong in the html brick.


#9

@Eldar if in Russia you can see the site from live helper chat, I found the widget code to change in the html brick.

<!-- Place this tag where you want the Live Helper Plugin to render. -->
<div id="lhc_status_container_page" ></div>

<!-- Place this tag after the Live Helper Plugin tag. -->
<script type="text/javascript">
var LHCChatOptionsPage = {};
LHCChatOptionsPage.opt = {};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = '//demo.livehelperchat.com/chat/getstatusembed';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Is from their demo page…


#10

Hi guys,

We seem to get different results on this :thinking:
It looks like this on my iPhone X


#11

hello @Jakerlund that was when I try the live helper demo in the site to sent to @eldar, reload the page that now is in the way that appears in the top.
Thank you for your help too.


#12

Hi @Pealco

Yes, it looks like this now.


#13

and as you can see the content is overlapped, and can’t find a way to solve it.


#14

Sorry, but did anyone found a solution for this problem?

Many thanks in advance…


#15

Hi @ Pealco

I had a look, played around with it. And my 2 cents are the following:

The chat widget plugin seems to have a whole lot of definition and styling as you can see from the below screen capture.

My understanding is that there is either a missing definition, styling which has the widget overlap in mobile or a definition, styling which overrides the Blocs default.

Thus I would see with the people who provide the chat plugin.

MDS


#16

Hello @MDS thank you for your time, as you told me I try to get help in LHC, and they said that to have that help we have to €€€€.

So I try to find something, and in the server I have this file that is in their GitHub page:

Can it be something about line 601, 617?

Many thanks.


#17

Hi Pedro

This is what I suspect - but difficult to confirm.

I am not an expert and thus a bit difficult to assist. It may be also the way you implemented the solution…

Sorry but difficult here for me to say. You may perhaps also want to look at implementing other chat services such as tawk.to which I find much more easy to use.

Good luck.

MDS