Better solution for tablet columns

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index 31e704ea47d226ee705dc776a5e95509a1789b66..994b504706715a4ed0f4bd11f4c51ccb5d599bdc 100644 (file)
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -319,8 +319,7 @@
                }
                
                @include screen-sm-md {
-                       // WebKit fix
-                       margin-top: -30px;
+                       margin-bottom: -30px;
                        
                        -webkit-column-gap: 30px;
                        -moz-column-gap: 30px;
@@ -334,8 +333,10 @@
                                overflow: hidden; /* Fix for Firefox, IE and Edge */
                                
                                // WebKit fix
-                               display: inline-block;
-                               margin-top: 30px !important;
+                               background-clip: padding-box;
+                               border-bottom: 30px solid transparent;
+                               display: block;
+                               margin: 0 !important;
                                width: 100%;
                                
                                -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
@@ -397,11 +398,6 @@
                        margin-top: 30px;
                }
                
-               &.boxAlternative {
-                       background-color: transparent;
-                       border: 1px solid $wcfContentBorderInner;
-               }
-               
                &.boxError {
                        background-color: $wcfStatusErrorBackground;
                        color: $wcfStatusErrorText;