solved, lock please

This is the first time I'm attempting to actually apply some custom css to one of my pet profiles, and I'm by no means trying to do anything elaborate or make it look particularly fancy, I mostly just wanted to add the drawing I made of said pet (Benton Fraser my Marsh Ontra) to his profile and move some stuff around to make room for that :)...

I think I managed fairly ok for someone who doesn't have a lot of experience with css.. I used bits and pieces from various help threads on this forum (primarily this one and this one) plus this other external site and tweaked them until I mostly got what I wanted.. but I do have a question.. well, two actually:

I'm mostly happy with the result, but there's one thing I didn't actually intend to happen and I'm not sure which part of my code is doing it... which is: I did put in code to remove the stat progress bars and to remove the food eaten and job part of the stats.. but for some reason EVERYTHING is gone now (I don't actually mind much, because I'm not intending to train this pet much, but I would have liked to keep the "books read" + intelligence section on his profile and I don't know why it's gone or how to get it back..)
I noticed that when I look at it on my phone's browser or if I make my browser window smaller, some parts of the profile get smushed together and start to overlap, so I was wondering if that's an issue for people who have a smaller screen resolution than me (I have 1920x1080 and it looks fine for me, but it looks like this when I make my window smaller) and if so, if there's something I can do in the code to prevent the image from disappearing behind the other content.. I realize it's probably doing that because it's currently set as the background picture, but I only did that because that was the only way I could get it in the right corner NEXT to the official pet image and info instead of underneath it with the text.. I'd really appreciate some feedback/tips on how to deal with that or if it's good enough as it is even for people with smaller resolutions..

HERE is a link to the pet profile I'm talking about, and this is the code I'm currently using:

profile code Benton Fraser


"I first came to Chicago on the trail of the killers of my father, and for reasons that don't need exploring at this juncture I've remained, attached as liaison with the Canadian Consulate."



Contable Benton Fraser, due South

<style>
, , -ban, -ban-main, -lrc, -rrc {display:none;}
, -right, , , , h2,  a, , ,  {display:none;}
, , body, ,  {background-color:transparent;}

body {
background:url(https://orig00.deviantart.net/4088/f/2017/244/2/6/fraser_ontra_snow_bg_sig_by_quinsarqua-dbm2e4u.png);
background-repeat:no-repeat;
background-position: 75% -7%; 
background-size: 575px 500px;
background-color: ;}

.statbar{display:none;}

li#stat_food_eaten, li#pet_employment {display: none;}

/*To reposition the entire layout*/
{position:absolute; top:85px; left:-270px;}

/*Moves Treasure*/
{position:absolute; top:635px; width:800px;}

/*moves friends*/
{position:absolute; top:1000px;}

.treasure_item {margin-top:2px; margin-left:5px;}

</style>

Sorry for the long post, I'd really appreciate any tips/suggestions :)

-Thank you kindly in advance

[edit] I took another look myself and just tried deleting some elements that were set to 'display: none' and I figured out which were causing all the stats to disappear.. it was the one that made all of them go away, but I also had to get rid of a, because for some reason that doesn't just remove the annoying "disable/enable weapons showing" button (which I don't need because my pet doesn't have any weapons anyway), it also removed the link to the list of books my pet has read.. I can't JUST get rid of the weapons thing by itself while keeping the link to the books.. so.. I guess that problem is solved now..

I'd still like to know if there's a way to prevent the image I inserted from disappearing behind the pet's info etc on smaller screens/browser windows.. the only way I can find to insert an image using css seems to be by setting it as the background image.. is there really no other way or at least a way to make it stay NEXT to the pet info bit instead of being able to go underneath it?

[edit]I hope adding another edit won't mess everything up (it keeps trying to repeat the whole bit that comes after the bit beneath a spoiler tag idk why) but I had another question and I'm not allowed to reply to my own thread:

is there a way to change the width of the column that contains the pet's name to allow the full name to fit on a single line? because this pet's name contains a space and apparently it's JUST a bit too long to fit the line so his first and last name are now underneath each other.. I tried inserting a .pet_name bit and change the width of that and that does absolutely nothing at all, and when I try to change the width of the entire column_2 it messes everything up because the pet image gets randomly moved on top of the minion and the pet name + owner etc gets moved to the right of the page and the piece of text I added in the bigger font gets moved upwards as well so it's overlapping a bunch of other elements, I just want the words Benton and Fraser to be next to each other instead of underneath one another :(

Logged Out

solved, lock please

Replies