MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 8: / Line 8: @@
      overflow: hidden;
      text-align: center;
-}
+     gap: 2%; /* Adds 2% margin between text and media */
-.current-text-header {
-     font-weight: bold;
-    font-size: 115%;
-    background-color: #eecdf2;
-    display: block;
 }
@@ Line 20: / Line 14: @@
      border: 1px solid #a2a9b1;
      flex: 0 0 60%;
-    float: left;
      text-align: center;
      padding-bottom: 2%;
      padding-left: 2%;
      padding-right: 2%;
-    margin-right: 0%;
-    margin-left: 0%;
      background-color: #fdf4ff;
+    box-sizing: border-box; /* Prevents border from adding to width */
 }
-.current-media-header {
+.current-text-header {
      font-weight: bold;
      font-size: 115%;
-     background-color: #cef2e0;
+     background-color: #eecdf2;
      display: block;
+    width: 100%; /* Makes header full width */
+    margin-left: -2%; /* Compensates for parent padding */
+    margin-right: -2%; /* Compensates for parent padding */
+    padding: 0 2%; /* Restores internal spacing */
 }
 .current-media {
      border: 1px solid #a2a9b1;
-     flex: 0 0 32%;
+     flex: 0 0 38%; /* Adjusted from 32% to account for 2% gap */
-     float: left;
+     text-align: center;
      padding-bottom: 2%;
      padding-left: 2%;
      padding-right: 2%;
-     margin-right: 0%;
+     background-color: #f5fffa;
-     margin-left: 0%;
+    box-sizing: border-box; /* Prevents border from adding to width */
-     text-align: center;
+}
-     background-color: #f5fffa;
+.current-media-header {
+    font-weight: bold;
+    font-size: 115%;
+    background-color: #cef2e0;
+    display: block;
+    width: 100%; /* Makes header full width */
+     margin-left: -2%; /* Compensates for parent padding */
+     margin-right: -2%; /* Compensates for parent padding */
+     padding: 0 2%; /* Restores internal spacing */
 }
 @media screen and (max-width: 768px) {
+    .current-box {
+        flex-direction: column;
+        gap: 0; /* Removes gap in mobile view */
+    }
      .current-text {
-         width: 98%;
+         width: 100%;
-        float: none;
-        text-align: center;
          padding-left: 1%;
          padding-right: 1%;
-         padding-bottom: 0%;
+         padding-bottom: 0;
-        margin-right: 0%;
      }
      .current-media {
-         width: 98%;
+         width: 100%;
-        float: none;
          padding-top: 0;
-        text-align: center;
-        display: block;
          padding-left: 1%;
          padding-right: 1%;
-         padding-bottom: 0%;
+         padding-bottom: 0;
+    }
+    .current-text-header,
+    .current-media-header {
+        margin-left: -1%; /* Adjusted for mobile padding */
+        margin-right: -1%;
+        padding: 0 1%;
      }
 }
+/* Note: I removed float properties as they're not needed with flexbox */
 .eras-table {