Confused

[adore]

I'm using a Livejournal layout, S2 Smooth Sailing, and made a custom layer to use it here. Something weird is happening where the container for my entry is wider than it should be. Clicking on an entry displays it narrower, the width it's supposed to be. I don't know much about coding but I can add or tweak a bit of code if I know what I should change. I hope there's a fix for this!

Comments

[luckyzukky]

i played around in devtools for a bit but the code (as scary as it is, being table based) looks fine. i actually went back a page in your journal and it seemed to fix itself, so maybe there's something on your last few entries causing an overflow, like some inline CSS in the entry?

[adore]

It turns out it was a too-wide image causing the overflow! It didn't occur to me that instead of images fitting the entry container, the entry container would stretch itself to the image width.

I'm encountering another thing where, when I click to 'reply' to a comment, the comment is obscured by the modules. The layout has stylized comment pages so I don't know what's causing the comment to appear higher, though :/

[rodo]

I looked at it, and it appears the comment has a class called "commentHolder" with a margin of -120px. That means it's moved upwards. If that's something you did in your custom layer, or something you can address there, you might be able to fix it. But I don't really know much if anything about Dreamwidth layouts.

[rodo]

It's the second graphic in your post about virtual pets. It's wider than the container width should be, so the container resizes itself - and all the others on the same page match. If you add width="500px" to the img tag, for example, the image should shrink, and so should the entries.

[adore]

Thank you so much, that fixed it immediately! It never occurred to me that instead of the image fitting to the container the entry container would stretch.

[rodo]

There's use cases for everything. Sometimes, and image might need to be big for people to actually see what's going on, and in that case you've got the problem of whether to make the container grow or to give the container a scroll bar, for example. Imagine you're looking at a picture that's wide but not that high on a small screen, in those cases, scrolling might be preferable to not being able to see the picture properly at all without downloading (because the box's size depends on the screens).

In summary: Layout is hard.