I played around with your code in chrome dev tools - the issue isn’t device specific it’s the code you’ve written that is causing the issues,
Do the following to fix it:
padding: 50px 0;
- remove current
padding: 0 50px;
- change to
position: sticky - this does the same as
position: fixed but keeps your element within the flow of the document
Make sure that your media queries aren’t resetting these values at different screen widths.
Use absolute positioning only on small elements, e.g. a small button or icon that you want to position in a particular spot relative to another relatively positioned element but not have its position affect the position of any other elements on the page. Don’t use it for general layouts it’s not required for that use and it will cause you problems with responsiveness.
Avoid giving elements fixed heights where possible, especially if they contain text. The element will naturally grow or shrink to fit the text within it.
Most browsers tend to render stuff in the same way 99.5% of the time. Tools like browserstack are used to catch the 0.5% of edge cases between browsers by testing on real devices. You shouldn’t need to worry too much about using it.
Edit: i think you’re trying to achieve animating the text in? in which case you should wrap the text in a containing div and give it a fixed height which is enough to contain the text when it floats down, keep the #text div to
position: absolute and animate it in… you’ll need to change the size of the containing div with media queries as the font size etc change size depending on the screen size