[AndreiParticipant]

Hi guys,

I have an issue with the slider from my home page. Everything works great on desktops and laptops, but when I load the website on mobile and tablets, the slider jumps and resizes because of the address bar. What can I do to fix this? My website is //sinestezic.com

[RupokMember]

Hi there,

Thanks for writing in! It seems fine as expected on my end. Would you clarify with a screenshot?

Cheers!

[AndreiParticipant]

Hey there Rupok,

I don’t think I can catch it in a screenshot. You can’t see it if you verify it in device toolbar, in windows. You actually need to verify it on mobile, Android. When you scroll down at the bottom of the home page and the address bar dissapears you can see that the slider jumps. And when you scroll up again at the top of the home page, and the address bar reappears, the slider jumps again and it resizes.

Regards.

[RupokMember]

Hi there,

Thanks for clarifying. Yes I can see what you are referring. Unfortunately there is no fix for this since it’s expected on mobile browser. It’s kinda irritating I know but the auto hiding feature of mobile browser toolbar causes some more issues like this and we can barely do anything about this.

Thanks for understanding.

[AndreiParticipant]

Rupok, thank you for your reply. Ok, I understand. There is another issue on the mobile: when I open the menu from the button, the menu opens somehow jerky. It doesn’t open smooth. Is there something I can do about it?

[AndreiParticipant]

Again, you need to try it on your mobile device, not on your device toolbar.

[AndreiParticipant]

Also about the slider jump, there are websites built with X theme that do not encounter this problem.

[Paul RModerator]

Hi,

To fix it, you can try adding this in Custom > Edit Global CSS in the customizer

body .x-navbar .mobile .x-nav {
    margin-bottom:0;
}

Hope that helps.

[AndreiParticipant]

Hello Paul,

Unfortunately it doesn’t work.

[JadeModerator]

Hi Andrei,

Please try this code:

.x-navbar .mobile .x-nav {
    height: auto !important;
    max-height: 309px !important;
    margin: 0;
}

Hope this helps.

[AndreiParticipant]

Hi Jade,

I tried this code and it doesn’t work. I didn’t delete it yet, it is still in the style.css file.

[RadModerator]

Hi Andrei,

The address bar is part of the mobile browser, and there is no way to control it. If you’re referring to iOS then you may check it here http://iosjs.com/

I agree that address bar is kind of annoying, it hides and display while your site is animating affecting the vertical position.

Thanks!

[AndreiParticipant]

Hi Rad,

Ok, I agree that I can’t control the address bar, but is there any way in which I can control the animation of the slider so that it doesn’t jump and resize any time the address bar hides/shows? There are websites built with X-Theme that do not have this issue.

Thank you.

[Paul RModerator]

Hi Andrei,

Can you provide us a video showing the issue so we can properly understand and provide you a solution.

Thanks

[AndreiParticipant]

Hi Paul, I was not able to make it smaller than 512KB, so I uploaded it on wetransfer https://we.tl/JRnv5oU2aK. It has around 2MB. Please notice how the menu acts before I scroll down. It opens without lag, smoothly. When I scroll down, you can see how the image jumps and resizes. When I scroll up again, the image jumps again and resizes. Now notice how the menu lags when I open it> It jerks, it doesn’t open smoothly.

[Author]

Posts