Question

I have a fairly simple layout with two rows. The second row has two columns with a table in each column. When the window is wide, the whole thing looks beautiful, but as I start to make the browser window narrow, the two tables start to overlap!

On lower resolution monitors, this means that the browser can be as wide as 2/3 the width of the monitor, and the tables start to overlap!

For a demo, please take a look at the website.
Click on “Sample data” and you will see that data in the two tables is overlapping. Specifically look for rows which have longer values.

I am seeing this consistently in Chrome/Windows.

Is this simply a limitation of bootstrap (as I’ve read some people complain) or am I doing something wrong? How can I resolve this?

Thanks

Answer 1

You basically itentified the problem in your question. The long values for the “Message” row end up being too long at the narrower resolutions. My suggestion is to remove “white-space: nowrap” from the “.badge, .label” selector. That will will help keep them from busting out the side of the table and at wider resolutions they’ll fit.

Make sense?