Admin Panels — Remove Columns for screen widths under 600px

This is for pages like the admin/configuration landing page. We should document all of those pages and make sure they are all built very similarly, preferably with the exact same classes.

I'm happy to do this, but I don't want to step all over work that's already been done. Has anyone gone through and done an audit core's admin panels?

Over in #1137782: Remove unused CSS in Seven theme that uses desktop-sized layouts, Jeff Linwood says:

Specifically, the CSS in Seven's style.css that should change along with screen width is Lines 734-752:

/**
 * System.
 */
div.admin .right,
div.admin .left {
  width: 49%;
  margin: 0;
}
div.admin-panel,
div.admin-panel .body {
  padding: 0;
  clear: left;
}
div.admin-panel {
  margin: 0 0 20px;
  padding: 9px;
  background: #f8f8f8;
  border: 1px solid #ccc;
}

That said, it's my recommendation that we look at a semantic way of describing this output.

I think that comment will help move this issue along.

I'll be working on a patch for this.

Here's a first stab at this issue. I prefer to use em values in media queries, so I set the breakpoint at 40em.

Marking as needs review.

Forgot to edit the rtl stylesheet in the last patch...

works for me, but it looks like it needs a reroll.

Here it is.

This is a good improvement.
Tested with Chrome .

This patch is a Good Thing.

Makes sense. Committed/pushed to 8.x.

Nice work!