Changeset 9622 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss

Timestamp:

03/24/2020 02:43:10 AM (5 years ago)

Author:

dd32

Message:

Theme Directory: More responsive styling for the theme listing.

This should fix the stretched theme images in certain responsive sizes.

Props dufresnesteven.
Fixes #5110, #4499.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss (modified) (4 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss

@@ -219 +219 @@
 
 .theme-browser .theme .theme-screenshot img {
+    display: block;
+    margin: 0 auto;
     height: auto;
-    max-height: 214px;
+    max-height: 300px;
     left: 0;
     position: inherit;
@@ -226 +228 @@
     -webkit-transform: translateZ( 0 );
     transition: opacity 0.2s ease-in-out;
-    width: 100%;
 }
 
@@ -1540 +1541 @@
 }
 
-@media only screen and (max-width: 1120px) {
+@media only screen and (max-width: 865px) {
     .filter-drawer {
         border-bottom: 1px solid #eee;
@@ -1652 +1653 @@
 }
 
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 400px) {
     .theme-browser .theme {
         width: 100%;