Fixed broken box image CSS

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index fdcec4fb94b1da59b25f343bc5252a5de3beb5fa..96ea9354ec8a8f85e08c5552d1862707e916cd46 100644 (file)
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -257,33 +257,43 @@
                                .boxImage {
                                        float: left;
                                }
-                               
-                               .boxTitle,
-                               .boxContent {
-                                       @include screen-md-down {
-                                               margin-left: calc(30% + 15px);
-                                       }
-                                       
-                                       @include screen-lg {
-                                               margin-left: calc(30% + 30px);
-                                       }
-                               }
                        }
                        
                        &:nth-child(even) {
                                .boxImage {
                                        float: right;
                                }
-                               
-                               .boxTitle,
-                               .boxContent {
-                                       @include screen-md-down {
-                                               margin-right: calc(30% + 15px);
-                                       }
-                                       
-                                       @include screen-lg {
-                                               margin-right: calc(30% + 30px);
-                                       }
+                       }
+               }
+       }
+       
+       @include screen-sm-md {
+               .boxWithImage {
+                       &:nth-child(odd) {
+                               .boxImage {
+                                       margin: 0 10px 10px 0;
+                               }
+                       }
+                       
+                       &:nth-child(even) {
+                               .boxImage {
+                                       margin: 0 0 10px 10px;
+                               }
+                       }
+               }
+       }
+       
+       @include screen-lg {
+               .boxWithImage {
+                       &:nth-child(odd) {
+                               .boxImage {
+                                       margin: 0 20px 20px 0;
+                               }
+                       }
+                       
+                       &:nth-child(even) {
+                               .boxImage {
+                                       margin: 0 0 20px 20px;
                                }
                        }
                }
@@ -663,17 +673,6 @@
        @include screen-sm-up {
                .boxWithImage {
                        @include clearfix;
-                       
-                       .boxTitle,
-                       .boxContent {
-                               @include screen-md-down {
-                                       margin-left: calc(30% + 15px);
-                               }
-                               
-                               @include screen-lg {
-                                       margin-left: calc(30% + 30px);
-                               }
-                       }
                }
                
                .boxImage {
@@ -681,6 +680,18 @@
                        width: 30%;
                }
        }
+       
+       @include screen-sm-md {
+               .boxImage {
+                       margin: 0 10px 10px 0;
+               }
+       }
+       
+       @include screen-lg {
+               .boxImage {
+                       margin: 0 20px 20px 0;
+               }
+       }
 }
 
 .boxesContentTop:not(:first-child) {
@@ -827,17 +838,6 @@
        @include screen-sm-up {
                .boxWithImage {
                        @include clearfix;
-                       
-                       .boxTitle,
-                       .boxContent {
-                               @include screen-md-down {
-                                       margin-left: calc(30% + 15px);
-                               }
-                               
-                               @include screen-lg {
-                                       margin-left: calc(30% + 30px);
-                               }
-                       }
                }
                
                .boxImage {
@@ -846,6 +846,18 @@
                }
        }
        
+       @include screen-sm-md {
+               .boxImage {
+                       margin: 0 10px 10px 0;
+               }
+       }
+       
+       @include screen-lg {
+               .boxImage {
+                       margin: 0 20px 20px 0;
+               }
+       }
+       
        .boxMenuLinkGroup {
                .boxMenu {
                        > li {