- 4,683
- Posts
- 10
- Years
- Age 29
- Seen Mar 22, 2024
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.
---
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
---
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?
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:
---
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:
---
Spoiler:
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?
Last edited: