Distance between reusable header and element widened in responsive design

Hi, on the laptop screen the distance between the top header and the chatbox element looks normal. See picture:

But, on the mobile screen, the distance widened, see the picture:

What’s the solution?


If it is a reusable then it’s responsiveness settings are adjusted inside

Mobile responsiveness can be very tricky, especially if you want a messenger system that is responsive on mobile for both landscape and portrait mode. To enable a fully responsive messenger that looks great on all devices you would need some CSS to get things just right.

Luckily, there is a template that is already set up for this

In your particular situation it is hard to say exactly what might be the issue, as there can be many reasons for it and only working with the two screen shots provided doesn’t give as much detail as needed to analyze the situation to provide a solid solution. Could be that your repeating group that is supposed to display the messages is not set up appropriately. Could be an invisible element overlapping something else.

Sometimes it is better to avoid the headaches and wasted time of trying to ‘recreate the wheel’ and it is faster and cheaper to purchase and integrate a well-made template.

1 Like

Thanks for the help. Actually, there was an invisible element overlapping between the header and the chat element which was preventing the responsiveness. I figured it out through a bubble debugger which I find very helpful. :slight_smile:

There is also an x-ray function to show all elements with a level of transparency that makes it really easy to spot overlapping elements.

1 Like

It don’t scan elements which are hidden in element tree.