Left edge truncated in desktop layout

Not sure whether to start another thread, but there are some layout issues with the desktop site too, on Chrome. The usernames get truncated on the left edge, even when I’m scrolled all the way to the left.

(I chopped the middle of the page out but kept the bottom so you could see the horizontal scroll bar.)

It is also clipped on the right. Your browser is simply too narrow, we designed for a 1024px minimum and 1280px+ recommended width on tablet, laptop, and desktop.

If it was just a “window too narrow” situation, the text wouldn’t get truncated. The actual problem seems to be that you have a left margin of -12px on DIV.row elements, which are inside a DIV.container that is 995px wide. When the container is floated into the middle of the screen with space around it, the fact that the content juts out left of the container isn’t visually noticable, but the bug’s still there.

As far as I can see, removing the -18px left margin from DIV.row fixes the problem, and has the added bonus of making the left and right margin whitespace the same width when the browser is very wide.

I see what you mean, you will have to discuss that with @awesomerobot as that’s a recent change.

But for the record, the right side is truncated in your screenshot as well, look at the top right.

This is how Bootstrap’s grid system works - Bootstrap uses span elements to establish a grid, and puts a margin on the left of each span to put space between each column of the grid — so naturally if you have rows on that grid, they’d be offset by 12px — so the -12px resets that…

I’d wager to guess that the topic page isn’t set up to follow the grid 100%, hence the noticeable offset. For now removing that -12px from Bootstrap’s CSS would mess up the alignment of other pages (the topic page, for example) and things would be off for everyone, not just those on the topic page on narrow screens…

Anyway, for now I just added a 12px margin to the posts wrapper to compensate, that should probably fix it (I might undo it if it affects anything else though)…

2 Likes

This topic was automatically closed after 1246 days. New replies are no longer allowed.