Problem with mobiles and Grav OnePage Demo

While the GetGrav Homepage look fine on an iPhone 6, the onepage sample does not display the showcase image. Also the menu for the onpage sample consistens only of the Home link, but nothing else.

I’ve attached some images for you:
Image1 Image3 Image4

Cheers
Nick

Thanks for report :slight_smile:

Any idea how I can solve this? :slight_smile:

I’m not a good designer (really bad srly), then you need to waiting from dev team fix :slight_smile:

I will have to investigate the missing showcase image in mobile view.

Regarding the menu, that is intentional. The onepage demo only has on-page menu items, and these make no sense in a mobile view so they are hidden. If you added other pages (such as About Me, or Blog, or whatever), they would show up in that off-page navigation in the mobile view.

Ah well, I think I just forgot about that. Already read this somewhere. Regarding the missing image: I just saw that it’s not missing, but enlarged beyond recognition. So maybe this will help.

It’s the background-attachment: fixed; attribute that is causing the problems. Apparently this is not supported in mobile Safari or Chrome. I’m digging further to find out how I got this working on getgrav.org.

Well looks like that’s all it is. On getgrav.org it’s not fixed at all. I think I will remove this from the Antimatter theme by default as it’s more mobile friendly. Expect an update soon!

Ok Fixed in Antimatter v1.2.7. You can update it with GPM or just download it from the downloads page.

Thanks a lot :slight_smile:
Could you tell me which files you’ve changed?

sure thing: https://github.com/getgrav/grav-theme-antimatter/commit/6818b2de02044b74c77033a8ec98e73540ab31de

That worked so far, although the image is now displayed differently, meaning it’s not zoomed like it was before. While this probably wasn’t intended in the first place it certainly was an interesting effect. Can we reproduce this despite the change you’ve made?

Yes, it’s CSS, something like:

.modular .showcase.flush-top {
  background-position: top;
}

Thanks.