So I've noticed an issue with a few of my profiles; they work fine on my PC/browser, but on my phone (and sometimes other browsers) they're all borked up. The most obvious example is Charles' profile:

Which looks like this on my phone. I have the same problem with

I'm a bit new to coding myself so someone else might know better, but I think what you want is to switch the position value from "absolute" to "fixed"? That's what sorted it out for me.

I have a tutorial on CSS position (and display) that might help you understand it better :) https://bug.bz/tuts/display-position.php

Thank you guys! I made the '.container_fluid' and '#content' containers (I really don't know what to call them haha IDs? I dunno) fixed, but it didn't seem to fix the issue. D: I really appreciate the positioning guide; it made things make a lot more sense! ... but in terms of Subeta coding, I'm not sure what to make fixed, absolute, etc. in order to have everything be cohesive.

Hey so... I took a closer look at your pets and I hope I can help with the specific problem here :)

Let's look at

• You have a background set on , and you have specified it to be attached on the bottom left of the page
• Then you have your other elements set with position:absolute, but for the offsets, you specify a top offset and a left offset

For example, your column_2 div has these offsets: top: 405px; left: 420px What that means is: Position this element 405px from the top of the page, and 420px from the left of the page.

So here is what happens. If the height of your browser increases, your background will stay on the bottom of the page, but the other stuff will move upwards since you specify how far away it needs to be from the top of the page. You can fix this by changing the top offset to a bottom offset instead. So instead of something like top: 405px; left: 420px, try something like bottom: 10px; left: 420px

(If that was still confusing, please let me know and I'll draw a diagram of it for you :) )

The following is just if you are curious to know a bit more, and maybe a better way to code it that would save you time tweaking things.

Back to your column_2 div: It is getting positioned relative to the entire page because you didn't set a position on any of the containers it's nested in. If you had set absolute/relative position on any of those containers, it would be positioned relative to that container instead.

For example... if you go up a few levels, you'll notice it's inside the .container-fluid div.

If you set: .container-fluid { position: relative; }

Now, instead of 405px from the top of the page, its position is defined as "405px from the top of .container-fluid" (Does that make sense?)

The nice thing about this, is that you can define all the offsets relative to something like .container-fluid. Then, if you want to move everything at once, all you need to do is move .container-fluid, and everything else will move with it. Then you don't need to edit the offset of column_2, column_3, etc individually. You can just edit the container they reside in.

(I feel like I just threw a lot of explanation at you at once though, and I'm very sorry if that was overwhelming! Partly it is because I'm a little tired tonight, so I am a bit rambley and not as coherent as I could be. but if you have any questions about this, please ask? When I next have a block of free time I'll try and whip up some examples for you to make things clearer too.)

This worked! Thanks so much! Everything made sense to me (even with my brick brain lol). : D I really appreciate you taking the time to help me.