Like the title say. Whenever I switch monitors, switch to mobile, or change screen magnification, suddenly all my carefully positioned elements are in a completely different place. Sometimes text and images even overlap. How do I prevent this from happening?

I'm not sure what I'm missing, I've noticed other layouts don't move around as much as mine do.

Hey! When you are designing website layouts, positioning can be quite the hassle. If you'd like, post your sites where this is happening. Most of this comes from unresponsive code. For instance, defining fixed px sizes for height, width, etc., may look good on the resolution that you are currently on, but may be different on other devices. The same thing goes for percentages. a margin of 20% from left and right might look good on your desktop, but will most-likely look quite awful on high-resolution mobile devices. Most web designers are dealing with that stuff professionally so it's absolutely fine if this keeps happening for your profiles! I can write down some hints for you to take into account when you are writing up your pages, but in the end it is up to you how much time you actually want to invest into optimizing your pages.

If you want your boxes to scale with the viewport, instead of using px values for sizes and positions, use vw for your viewport width and vh for your viewport height. 100vw means that it takes the current size of the window while adjusting as you scale it on your desktop. That's a common practice for some basic responsive designs if you don't want to think too much about it. There are some more relative units, so do check them out!

Media queries are a good way to include a mobile version of your site. That does mean that you will have to write up changes for your sites while testing them out on the device or by scaling your window down. You might want to scale up the font size for the mobile version of your page or change the layout into something more scrollable and vertical. Here some reference on how to do this! I do find them very inconvenient and messy and try to not use them in any way possible.

I always encourage everyone getting into layout design to read about CSS grids and flex boxes. They immensely help out with spacing and showcasing many things at once like the treasure chest and pet info. These guides I always recommend for newbies.

Most simple designs have a more vertical layout where you simply scroll through, so I do recommend to make your layout big and relative to your window's width. That way, your items won't even get the chance to layer on top of each other. This does look rather boring and sterile, I find though.

There is this nice little calc() function which you can use to combine static and relative units for your sizes. I use this most of the time for font sizes. You can define kind of like a lower bound static value like 1em and add a bit of viewport height to scale your font with the window height. It's a bit cheesy but I do like it that way. Something like font-size: calc(1em + 2vh); mostly gets the job done. This does need some experimenting and practice, though.

Another thing most people might tell you is to define max-height and max-width to your layout or defining top, bottom, right and left for your fixed and absolute containers. Definitely worth trying out, but yet another approach.

Feel free to text me if you've got any questions. This might seem daunting and it's okay to overwhelmed with this, haha. In the end, it is okay if your pages don't look nice on mobile. Most profiles don't, really. Don't think too much about it, try out some things here and there and see where you end up! People make their living with that stuff or simply us libraries that do it all for them, so no one expects you to master it all for your pet pages! There are some templates on here that are quite responsive too! o/

Thank you so much for this incredibly detailed response, this will be very helpful <3. Positioning is where I've been struggling with CSS the most. I'm just editing my pet's (Wyvern's) page for now, and I think I've mostly got things figured out for that now. You can take a look at it if you want but I'm experimenting with it so I don't know how pretty it will be. I tried out different combinations of fixed/relative/absolute throughout the layout and I've finally found one that seems to work best.

I used to code simple layouts for Neopets a million years ago. Subeta lets me use much more modern code, which is super cool but a lot to learn. I'm used to either px or percentage values, but I've seen vh and vw used around here and I was wondering about it, this is a great explanation. I will definitely check out your grids and flex boxes link too, because my next challenge is figuring out what to do with pet treasure etc. This will also be helpful if I ever try to code something that isn't for a pet site, especially the info you've provided about mobile.

I am very happy to hear that you are enjoying your stay and playing around with your profiles. It does look really cute and I love your art on it! You can always hit me up if you'd like to have anything fixed. It's easy to overedit that stuff to an extent where you barely have any control left, haha. Learning that stuff has really helped me a lot over the time and I hope you will end up satisfied with your work!! <3