Cards Element – Mobile Navigation Issue

Hello,

I used the Cards element on this page:

https://www.powerlab.com.pl/siec-dystrybucji/

I’m having a problem with its behavior on the mobile version. When I click on “Kujawsko-Pomorskie”, the page automatically scrolls to the bottom. In general, the navigation on mobile looks quite chaotic and doesn’t work as expected.

On mobile, I expect that when a card is clicked, the card element stays at the top and the corresponding content appears right below it, instead of the page scrolling to the bottom.

Could you please help me find a solution to this issue?

Thank you in advance.

Hello,

I have checked your website on mobile and tested the card tabs. When I click on a tab such as “Kujawsko-Pomorskie”, the corresponding content opens correctly, and the page does not automatically redirect or scroll to the bottom on my end.

See Screenshot for clarification: https://postimg.cc/PpbVtbtS

Please check back your site and check the issue. If you have any questions, feel free to contact us.

Best Regards

Hello Aizaz,
Thank you for your reply.
Please have a look at the attached video. I recorded how the scrolling behaves on my iPhone.
https://streamable.com/onyp2c

Best regards, Irina

Hello,

Please clear your site cache, browser cache, and check the site in incognito mode / another browser or device to confirm if the issue persists.

If the issue remains, could you please let me know which device or browser you are using?

Best Regards

Hello,

I recorded the attached video after clearing the website cache and browser cache and also testing the website in Incognito mode. The behavior is still the same.

I am using an iPhone and tested it in the Safari browser.

Kind regards,
Irina

Hello,

We have checked the issue and found that this behavior is related specifically to Elementor animations. To ensure more stable performance, we recommend replacing the Elementor animations with the animations provided by the theme. You can see an example of the setup here: https://monosnap.ai/file/R81RvGay6pC0mwffUSRLviJliwtFx9

Best Regards.

Hello Aizaz,

I removed all animations from this page, but the issue still persists.
I noticed that the cards work correctly only when there is a single container on the page.
As soon as there are multiple containers, the cards start behaving this way.

Kind regards,
Irina

Hi,

To investigate your issue in more detail, we decided to replicate your layout on our local staging site. We used identical Elementor tab and container elements, along with the official Hello Elementor theme.

The layout consists of side tabs containing three tabs in total: the first tab has 9 cards, the second has 2 cards, and the third has 9 cards. You can see how it looks on desktop in the following video. (Video https://monosnap.ai/file/O5fcTkPYKeSJPyxgjSX9oOD0vA17MD)

During our testing of this layout on a real mobile device, we noticed a behavior similar to the content on your page. On mobile, the side tabs switch to a vertical layout. When switching from Tab 1 (which has a lot of content and is quite tall) to Tab 2 (which has very little content), the page height instantly shrinks. However, the user’s viewport remains at the same scroll position, which suddenly ends up at the very bottom of the newly shortened page. (Video https://monosnap.ai/file/Ed0KfKcEFl7VXETlEeKFr6naZlpkc4). This is further proven when switching between tabs that share the same height: in that case, the transition is much smoother because the overall page height doesn’t change. (Video https://monosnap.ai/file/mIJbIYRpjluuIxsDMpnDmzrfaEkK4K)

Therefore, the behavior of Elementor tabs on mobile depends entirely on the difference in content height between them and the direction the user is scrolling at that exact moment. Judging by the settings of the Elementor Tabs element, it does not include any options to automatically force-scroll the screen to the top of the active tab’s content. Unfortunately, we cannot modify or influence the behavior of the plugin’s native elements from our side.

In this case, we recommend trying to reorganize the navigation on this page using different elements, or perhaps using a combination of different elements for desktop and mobile. For example, you could keep the tabs on desktop but use accordions or expanded lists on mobile.

Kind Regards

Hello,

Thank you so much for preparing such a detailed report with screenshots to investigate this issue.
It’s worth noting that this behavior is also present in accordions. Therefore, using them in my case doesn’t make much sense either.

So I finally find an optimal solution by adding some extra JavaScript to improve the UX and change this behavior on mobile devices.

Best regards,
Irina

Hi,

We are glad to hear that you found a direct solution to this issue. If you need any further assistance with anything else, please feel free to contact us.

Kind Regards

[Author]

Posts