Issue: CSS scaling/positioning on mobile

[Juno]

Is there any way to perfectly translate positioning from pc to mobile? This is what I am trying to do, and they all look fine on desktop, but completely off when I switch to mobile.

All it is is a scrollbox positioned over a background, so it should be pretty simple. I've tried both absolute/relative positioning, display: flex; and restricting the size of the content with extra divs but it never looks right on mobile. I put screenshots of what these look like on my phone within each example. If you are already on mobile right now then everything is just going to look super janky and you are probably going to have to scroll to the right to see what was supposed to be written on each screen lol

Attempt 1: The most barebones version, just the scrollbox over background image. Text goes off to the side completely on mobile.

​

Spoiler:

[center][cd="max-width: 1040px; height: 968px; font-family: open sans; font-size: 90%; letter-spacing: .3px; text-align: left; color: #42285b; background-image: url('https://i.imgur.com/mnyHAKP.png'); background-size: contain; background-position: center; background-repeat: no-repeat;"][cd="box-sizing: border-box; position: relative; top: 150px; left: 377px; max-width: 520px; height: 352px; overflow: auto; background-color: rgba(255,255,255,0.0); padding-left: 15px; padding-right: 15px; padding-top: 0%; padding-bottom: 0%; text-align: justify; border-style: none;"]

[FONT="Press Start 2P"]Attempt 1: The most barebones version, just the scrollbox over background image. Text goes off to the side completely on mobile:[/FONT]

[center][cimg="width: 200px;"]https://i.imgur.com/fEIqzX7.png[/cimg][/center]

[/cd][/cd][/CENTER]

---

2: So I tried wrapping it in a transparent outer div to restrict the scrollbox to the borders of a post - I don't think it made a difference on mobile, probably because 1040px looks very different on a phone screen

edit: nvm I tried using max-width: 100% instead of 1040px but it is the same, so I don't actually know why that was

​

Link color test

Spoiler:

[cd="max-width: 1040px; height: auto; position: relative; box-sizing: border-box; margin: auto;"]

[center][cd="max-width: 1040px; height: 968px; font-family: open sans; font-size: 90%; letter-spacing: .3px; text-align: left; color: #42285b; background-image: url('https://i.imgur.com/mnyHAKP.png'); background-size: contain; background-position: center; background-repeat: no-repeat;"][cd="box-sizing: border-box; position: relative; top: 150px; left: 377px; max-width: 520px; height: 352px; overflow: auto; background-color: rgba(255,255,255,0.0); padding-left: 15px; padding-right: 15px; padding-top: 0%; padding-bottom: 0%; text-align: justify; border-style: none;"]

[FONT="Press Start 2P"]2: So I tried wrapping it in a transparent outer div to restrict the scrollbox to the borders of a post - I don't think it made a difference on mobile, probably because 1040px looks very different on a phone screen

[center][cimg="width: 200px;"]https://i.imgur.com/xy4bAnk.png[/cimg][/center]

[url="google.ca"][span="color: #7aad9a;"]Link color test[/span][/url][/FONT]


[/cd][/cd][/CENTER]

[/cd]

---

3: So I used two more divs to position the scrollbox. It's better on mobile and the closest I got, but still not how I want it to look no matter how I adjust it

​

Spoiler:

[center][cd="background:url('https://i.imgur.com/mnyHAKP.png'); background-size: contain; max-width: 100%; height: 680px; position: relative; box-sizing: content-box; margin: auto; overflow: hidden; background-repeat: no-repeat; background-position: center;"]

[cd="box-sizing: border-box; width: 360px; position: relative; left: 80px; top: 0px; height: 100%; overflow: hidden; border-style: none;"][cd="height: 100%; box-sizing: border-box; overflow: auto; padding-top: 65px;"][cd="height: 240px; box-sizing: border-box; overflow: auto; width: 100%; padding-bottom: 0px; padding-top: 0px; border-style: none; text-align: left; color: #42285b;"]

[FONT="Press Start 2P"]3: So I used two more divs to position the scrollbox. It's better on mobile and the closest I got, but still not how I want it to look no matter how I adjust it [/FONT]

[center][cimg="width: 200px;"]https://i.imgur.com/3PMMj9Y.png[/cimg][/center]

[/cd][/cd]

[/cd]

[/cd][/center]

Also, if I don't restrict it with max-width, everything scales properly, but the post will scroll across the x axis because the image doesn't fit the mobile screen size.

Any suggestions?

edit: if this helps, I find that with the 4 divs I use in #3 for positioning, if I rotate my phone so it is in landscape mode, it looks exactly like it does on computer. Is there a way to adjust this responsiveness so that it also looks right in vertical mode?