Carousel misplaced in certain mobile views

I am using a very simple text carousel (news headlines) in the header of a website built with Elementor and Hello Elementor theme. The carousel is built with the “carousel” widget from Elementor.

The carousel displays correctly on most devices, except those mobile devices with a display dimension (width) of 446 to 769 pixels. (see exact details further below)

In these cases, the carousel appears moved down from its correct place, for about 25 pixels. This is troubling because the carousel is intended to be “glued” to the header, and now it looks like a stripe laid out over the content of the body, which is very disturbing.

The carousel appears correctly positioned in the Elementor WYSIWYG interface, but it appears wrong on all “real” devices with the described screen widths.

I checked possible problems caused by the other plugins (by using the “troubleshooting” system and disabling all other plugins). The bug appears even if all other plugins are deactivated, including the custom CSS used for this site.

I checked the whole internet and could not find anything similar (Except some old reddit posts claiming that these would be old bugs of Elementor…)

exact details:

portrait mode:

if mobile screen width:
< 446 px,
then it works OK

if mobile screen width:
446 < screen width < 769
then it shows the bug

 landscape mode:

if  446 px < width screen < 769 px,
then it shows the error

it seems that any dimension of the screen, between those 446 and 769 pixels (horizontal or vertical) will trigger the bug.

• This topic was modified 7 months, 3 weeks ago by horiamar.
• This topic was modified 7 months, 3 weeks ago by horiamar.

The page I need help with: [log in to see the link]