So on my work computer, which I believe is smaller and has a lower resolution, the profile currently has everything in line with the background, all the elements are clearly in the location corresponding to the background.

On my personal computer, the elements are much tighter and it's clear the background is larger

How do I make it fit normally for both computers or is that not possible?

So this 'should' be possible, but it won't be an easy task, can be quite difficult, like there is probably a cheat fix to make it look nice on the two screens but I assume you prefer it to look nice on more than those. I glanced and I think I know how to edit things to fix your issues, this involves complex positioning, just to touch on it need to find the point on commonality between screens then from there determine the offset to the position the element will end up, but this case the offset will probably need to take in some factors and scale accordingly.

I don't have the code right now but I'll fiddle with it when I have ample time and if I can get it to work out will post the code to fix your issues (will probably explain the code too so it understandable for anyone to know what is happening) if I run into an unexpected twist that I overlooked in the solution I thought of causing it to not work I'll let you know. It'd be nice to see how the profile should look so it's not just my guesses of where the elements should be and how they should look.

Now besides that there is one other solution to this. Which is separating the background, like the display box would be separated and be displayed as a image element, with that the size and positioned is controlled just like the elements you're trying to align with the boxes making alignment easier, but this way the remaining background and the elements separated from it won't maintain the same relation as they do now.

I hope all this makes sense if not plz let me know what and I'll try explaining, and sorry for the lengthy reply

no that totally does!! I'll work on making the display boxes as image elements thank you!!

should i make all the display boxes their own image or can i make all of those an image together?

I think either should work can't see why it wouldn't but if separate you have more control over it like for example tweaking things like if you want to move one a bit later you don't have to change the image and reupload

either way, if you need some help with getting things aligned just ping me but I hope it goes smoothly

so I kind of learned html and css backwards, and thus I'm kind of trying to reconstruct this backwards ^^'

I was thinking of making the background of the columns the display boxes because I was having a difficult time putting in the display boxes as image elements. They just weren't showing up when I was trying to insert them :/

putting them as background images might work with fiddling

So like are you using the html below to add the image as an element?

and the order might be off so you need to override it with CSS "z-index: 0;" default is zero, bigger number will render ontop I think rushed I can go into more when back in a hour sorry if doesn not make sense

edit: so by default the element would be under the added elements, but setting the elements that should appear on top for your purposes with at least "z-index: 1" should do the trick

here's what I have img { display: block; position: absolute; z-index: 1; }

but nothing is showing up? playing around with display, position and z-index brings up nothing

HOLY SHIT I FUCKING DID IT at least for the pet info I just made it the background omg I'm so proud of myself lmao

You definitely gave the confidence and direction of at least how to kind of figure this out!

that's fantastic

that might be due to how pet_desc is set up but there is a way around this without reworking things

add the element at the very bottom of your code after everything else, replace the url with the one you want since this is the info background then inside the style tag <style></style> like just before </style> put the following { position: fixed; z-index: -1; width: 360px; height: 314px; left: 55px; top: 224px; } The bottom 4 number will be needing fiddling to get things aligned correctly

also noticed that you have the nominate link near so I assume it'll appear inside the box you haven't add yet so you need to add the following in the selector " { HERE }", "z-index: 1;" so the nominate link appears above

There is probably a way to use background-image for this as well but it'd need a bit of fiddling and the above should work easier i think if there is any issue later let me know

Why did your code not have anything show up? well this is cause the pet_desc element where all your added code goes has overflow, positioned and such, so the image probably was at the end of your story. So fixed overrides that it does not get affected by scroll, though luckily the page doesn't scroll so it should not have any issue there.

So if there is something I overlooked let me know and if you are curious of how anything works (like how the css property position works) plz just ask me and I'll explain it (comment, smail, ping all fine)

the last thing seems to be that the scroll bar for the description has disappeared. It's like behind the image, but changing the z-index the or of the image (the id is now desc) seems to bring it forward

okay, So all but that image element needs to be put into a div

add the following at the end of style tags like before { position: relative; z-index: -1; overflow: auto; width: 325px; height: 200px; }

and that should be it for it to "work"

just to note I did notice the pet spotlight element does cover a bit of words not like in the way you cant see but in a way using a scrollwheel is block from scrolling it you can fix it with setting "height" inside the selector ".pet_spotlight" to 0 so like "height: 0px;"

I just moved the pet spotlight, I had meant to do that anyways. amazing, you're absolutely amazing!

okay, well I assume that is it for now

if you need more help now or in the future feel free to ping or message me