[Support request] Header displacement on android mobile (not iOS)

[Philippe]

Hey guys,

Strange things happening with the header of one of my pages on mobile. And only on Android!

As you can see, the header on dev.kipperdesign.ch works as intended.

However, if you head over to sam.kipperdesign.ch the sticky navigation half disappears up outside the screen…

This problem only seems to happen on Android devices, not iOS.

Also, there seems to be a weird 15px gap to the right of the screen. Perhaps they’re related?

Desktop all is fine and works as intended.

Any idea what gives?

[David]

Hi there,

thats odd, is it on all pages on the site ?

[Philippe]

Hi David,

No, it only seems to appear on the home page.

If I visit any other pages, for example one of the blog posts, the issue doesn’t replicate.

I’ve also tripple checked the CSS I’ve written, but don’t think anything influences the header.

Also de- and reactivated AddOns with no effect.

[Fernando]

Hi Philippe,

To be sure, can you try temporarily removing all custom CSS to test?

It would be good to have a copy of it elsewhere for backup.

[Philippe]

With CSS removed the header now disappears completely when scrolling.

The offset of 15(ish) pixels to the right of the screen is also still present.

The blog pages function normally.

[Fernando]

Do you still have the CSS removed?

It seems to be showing as expected from my end now.

I also re-tested on my personal android phone, and the header is displaying there correctly as well.

[Philippe]

Yes, it’s still removed.

The header bar scrolls with the content – it’s supposed to be sticky tho.

If i scroll to the left, a 15px blank margin appears to the right of the page.

Also checked in private browsing so that there’s no cache.

[Fernando]

The Blocks in your Content seem to be causing the issue. If you try removing the content Blocks, the issue goes away. Can you check the content of your front page and try temporarily removing them one by one?

It would be good to make a copy of your home page and perform the tests there.

[Philippe]

You’re absolutely right!!

It was the Blog block that was bugged.

I’ve used the “post masonary grid” element, in case you guys want to bug track.

Will look into a workaround now.

Thanks for pointing me in the right direction 🙂

[Philippe]

PS. the “Post Grid” element appears to have the same issues.

[Fernando]

I see. That’s not a default Block though. Is it from a plugin?

Perhaps you can use the free GenerateBlocks. GB has a Query Loop Block if you need one.

Here’s a video showing how it works: https://www.youtube.com/watch?v=R7fwJECtgSg

[Author]

Posts