Main content slides around on phone

Themes
1

Hi, I need someone with superior CSS chomps to me!

  • Ghost 5.2.4
  • Latest version of Editorial theme
  • No theme changes other than font size, the contents of the sidebar, and a foreach for pages rather than posts at the top of the homepage.

Rendering is perfect on all screens I have access to except iPhone 13 Pro in portrait orientation. Landscape is fine. But in portrait, one’s finger can move the content left and right as well as up and down. In Firefox, Safari, and Chrome.

I believe it may be an image issue. Posts without inline (as opposed to featured) images don’t exhibit this behaviour. Those posts with inline images do, but only as and when the image is first rendered.

e.g. Towards a shared understanding of ‘digital identity’ — reflecting on conversations with Doc Searls and Drummond Reed

Any and all ideas gratefully received :pray:t3: :heart_eyes:

2

For me, it seemed to be caused by long links that overstretched the viewport.

You could add the following CSS to Code Injection header and see if it helps the issue:

<style>
a {
  word-break: break-word;
}
</style>

Note that this will affect formatting for any links, so you may want to modify the selector to focus on your endnotes…

2 Likes
3

As simple as that.

The image thing was a red herring.

THANK YOU!

1 Like