Changeset 20446

Timestamp:

04/11/2012 09:54:56 PM (14 years ago)

Author:

koopersmith

Message:

Shrink theme screenshots for smaller screen resolutions. props helenyhou, see #20403.

File:

• trunk/wp-admin/css/wp-admin.dev.css (modified) (4 diffs)

trunk/wp-admin/css/wp-admin.dev.css

@@ -4282 +4282 @@
 .available-theme {
     display: inline-block;
-    margin-bottom: 10px;
-    margin-right: 25px;
+    margin-right: 10px;
     overflow: hidden;
-    padding: 20px;
+    padding: 20px 20px 20px 0;
     vertical-align: top;
     width: 300px;
@@ -4324 +4323 @@
 
 #current-theme.has-screenshot {
-    padding-left: 320px;
+    padding-left: 330px;
 }
 
@@ -4357 +4356 @@
     float: left;
     width: 300px;
-    margin-left: -320px;
+    margin-left: -330px;
 
     border-width: 1px;
@@ -4370 +4369 @@
 .theme-options .load-customize {
     margin-right: 20px;
+}
+
+/* Allow for three-up on 1024px wide screens, e.g. tablets */
+@media only screen and (max-width: 1200px) {
+    .available-theme,
+    .available-theme a.screenshot,
+    #current-theme img {
+        width: 240px;
+    }
+
+    .available-theme a.screenshot {
+        height: 180px;
+    }
+
+    .available-theme img {
+        width: 100%;
+    }
+
+    #current-theme.has-screenshot {
+        padding-left: 270px;
+    }
+
+    #current-theme img {
+        margin-left: -270px;
+    }
 }