18

In reviewing a post in the reopen queue, I came across the following.

Review with overlapping side-by-side view

(The review in question is here)

I don't see anything jumping out at me as a cause, so it could be browser related (just a wild guess though)

Browser: Chrome 43.0.2357.132 m
OS: Windows 8.1

2

3 Answers 3

6

This happened to me here as well. It should be an easy fix; the problem seems to be that the side-by-side column is limited to 330 pixels:

enter image description here

but there is a max-width: 410px for images in the side-by-side column, inflating the image over the column boundary:

enter image description here

Disabling this rule produces the desired result:

enter image description here

6

(from my MSO dupe)

Adjusting the CSS (across a couple files) to the following would give more room without expanding the standard 1060px column everything sits in. And I can't imagine an issue with the sidebar text overflowing, as the values below are about as wide as they would ever be:

#mainbar, .mainbar { /* all.css */
    #width: 850px;
}
#revisions .sidebyside-diff > div { /* this style is set inline */
    width: 395px !important;
}
#sidebar, .sidebar { /* all.css */
    width: 200px;
}

I like this solution a bit better than Glorfindel's because, instead of shrinking the image to fit, it expands the side-by-side columns to better utilize the space in the existing 1060px column that all site content sits within already.

2

This has been fixed at some point:

side-by-side diff with non-overlapping images

The relevant names for the CSS have changed in the interim - here's screenshots of the relevant parts of my browser console for deleted images and for added images. In summary, the classes applied to the images (diff-delete and diff-add) no longer affect width at all. However, since the images are inside a div with the s-prose class, and .s-prose img applies max-width: 100%, they end up simply scaling nicely with their diff's half of the screen.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .