Question

Mobile version gets stuck


Badge

Hello! I’m new to Elementor...

My site (https://techbrainlife.com/) works smoothly in desktop mode and in the mobile editing mode. However when I publish and view on my phone (safari & chrome), I have to attempt to scroll down a bunch of times before it finally becomes ‘unstuck’. 

I have deactivated and reactived all the plugins, but this doesn’t fix it. Any help would be appreciated.

Thank you!


14 replies

Badge

I don’t have pro. But I added it to the CSS section in Salient and it worked perfectly! Thank you so much!!!

Userlevel 4
Badge +2

You need to add is in a CSS custom code, not directly in the head like this. Do you use Elementor pro?

Badge

When I add it there, under <head>, <body> - start, or <body> - end, I get this:

 

Userlevel 4
Badge +2

Wrong spot. Add this to the custom codes under Elementor > Custom Code in the WordPress menu.

If it still doesn’t work, add !important at the end of the two attributes (before ;).

Badge

I added the code but is still stuck for me (mobile chrome & safari)  It takes 2 flicks to get the page to scroll. mabye I added the code in the incorrect place???

 

Userlevel 4
Badge +2

Also, on the mobile version these two images don’t show up. They do on the desktop view and in the responsive mode previewer.

Thank you again for your help

 

Hi Elise. Those images show up on my phone no problem. What’s the issue?

Userlevel 4
Badge +2

Okay I found it. The culprit is your theme.

html {
overflow-x: hidden;
overflow-y: scroll;
max-width: 100%;
}

overflow-x and overflow-y are interfering with you scrolling. I’m not exactly sure why, but commenting out those property restored the normal scrolling. Try adding this to all your pages in Elementor:

html {
overflow-x: unset;
overflow-y: unset;
}

I’m not quite sure why those overflow values would only mess up mobile, but that solves it. It looked like your site had two scrollbars that were messing up with each other. Strange!

You will see a blank space at the bottom, but it is normal. It is due to your footer hamburger menu, so I suggest you just write the menu out instead of hiding it in a hamburger on mobile.

Badge

Also, on the mobile version these two images don’t show up. They do on the desktop view and in the responsive mode previewer.

Thank you again for your help

 

Badge

Thank you

Userlevel 4
Badge +2

Oh wait. In that case I’ll check again.

Badge

I turned off the animations and it still gets stuck :(

Userlevel 4
Badge +2

Great! Make sure to mark the subject as resolved. ^^

 

Probably just set up something woky in the animation settings. Maybe try again later. =°

Glad this solved your issue!

Badge

Thank you. I will turn off the animated logos. Guess I’m just confused because on this site I made, it doesn’t get stuck at all. https://worldsportfc.com/

Userlevel 4
Badge +2

Not sure exactly why (I don’t usually use Elementor’s animations), but it’s seems due to your animated logo you have a bit everywhere. Try removing it? It’s not great for UX anyway.

Reply