Text re-positions on screen rotation

Tell us what’s happening:
I have completed a passing project. I used media queries for the first time. (the code is not pretty, but the end result is what i wanted). The problem is in screen/phone rotation. Whether I press the button “Other sites that may be of interest”, when in portrait or landscape, the text that appears is correct. However, if I were to press that button when in profile, then rotate the phone to landscape, the text that appears is pushed-down from its intended placement. I don’t understand why this behavior. I merely have that text appear and disappear on button click. Why does its position change?

Your browser information:
I am using a Motorola Android phone.

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36.

Link to the challenge:
It may be best to view my project at rr.well-versed.org
The code (and also the project) can be viewed at https://codepen.io/don199/pen/rXwMWL

Thank you for your time

You’re going from a tall screen to a short screen not everything fits so you must scroll.

Thank you for your response. I understand what you are saying, but it seems there should be a way to work this out. If I want text to appear in a certain way in landscape…Isn’t there a way to do that when the phone is rotated to landscape view?

From experimenting with your page it does ok at the very top or very bottom. In the middle your spot could be higher or lower because the text reflows changing the number of words per line. BTW i’m in iOS. Free reflowing of text is SOP for HTML. EPUB is based on HTML with a few extras plus programming. It stays pretty close to your place unless you drastically change your font size.You could steal some logic from the spec and implement it in Javascript.