Hi, I'm scratching my head over this!

I'm coding

I want the box to flow as one long column to fit his entire story–no scrollbar. On desktop, it looks as intended. On mobile, it looks like this. I don't know why the box appears shorter on mobile. Zooming in-and-out doesn't seem to be the problem.

Can someone please help?

Here's the part of the code for anyone who'd like to look it over:

{position: absolute; top: 746px; left: 330px; height: 3187px !important; width: 209.5px; overflow: none; background-color: ; padding: 16px; z-index: 1; border-top: 1.5px solid ; border-bottom: 1.5px solid ; color: ; text-indent: 3%; font-size: 1em;}

{position: absolute; top: 3970px; left: 330px; width: 231.5px; overflow: none; background-color: ; padding-top: 16px; border-top: 1.5px solid ; } .treasure_item {margin-bottom: 16px; margin-left: 8px; padding-right: 2px;} .treasure_item img{width: 56px; height: 56px; border-radius: 2px 2px 2px 2px;}

Thank you!

I don't think I can help with the code, but wanted to let you know that on my laptop there is a vertical scrollbar. Killer art btw!

have you tried setting the height to auto instead of giving it a value? that way it should extend to fit all the text no matter what.

Yep, I put that there as a sort of bandage in case I couldn't figure out what's wrong lol. Thank you!

Thanks for the suggestion! Unfortunately, there still appears to be an overlap on mobile so I think the issue may be the position?

That said, this is wonderful info to me because it is so much better than trying to guesstimate the exact pixel height haha! And it did at least fix the weird cutoff.

Ah, gotcha! Perhaps making the positioning of the TC element relative to the description element?

@ Estelle that seems to be due to how you've hardcoded the sizing and positioning of everything. it's usually supposed to be the case that the pet_treasure div comes after the pet_desc div, and will therefore automatically adjust position based on how much space the preceding content ends up taking up. however something about your positioning is preventing pet_desc from accurately reflecting how much space it takes up, so pet_treasure can't find the right place so to speak.

it's a bit messy, but it looks like this should fix things:

• switch petdesc (the custom div you've put the story in, not pet_desc with an underscore) to relative positioning
• change its "top" value to 0, and adjust its "left" value to restore the horizontal positioning
• add a margin-top to restore its vertical positioning
• switch pet_treasure to relative positioning
• change its "top" value to whatever looks best to you (probably will need to be around -20px to match the spacing of the other sections) and adjust its "left" value to restore the horizontal positioning

now no matter how long the description displays as, the treasure will move to accommodate it.

I appreciate the detailed instructions. Unfortunately the overlap is still on mobile, where it looks like the pet treasure is always 100-150 pixels higher on the screen VS desktop. I did add back in to see what would happen (did NOT realize I had a custom div there all this time lmao), but that messed with the positioning of everything else. I think I'll experiment more with positioning on a different pet profile.

For now, I'm just going to settle with making the treasure a second column and filling it with a bunch of items to even out the height LOL. :cry-laughing:

Thank you both for your help!

So sorry I wasn't able to help! I hope you figure it out! And thank you so much for the gift <3 I could have 10000 Toms and Thieves and it still wouldn't be enough lol