Changes for page Home
Last modified by Alex Cotiugă on 2026/01/13 13:12
From version 7.83
edited by Alex Cotiugă
on 2025/11/13 21:04
on 2025/11/13 21:04
Change comment:
There is no comment for this version
To version 7.87
edited by Alex Cotiugă
on 2025/11/13 21:16
on 2025/11/13 21:16
Change comment:
There is no comment for this version
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -123,29 +123,24 @@ 123 123 /* === WHY CHOOSE (widgets using Bootstrap grid) === */ 124 124 .widgets { 125 125 margin-top: 12px; 126 + 127 + /* Flex layout for equal-height and spacing */ 126 126 display: flex; 127 127 flex-wrap: wrap; 130 + justify-content: space-between; 128 128 129 - /* keep alignment with container */ 130 - margin-left: -15px; 131 - margin-right: -15px; 132 - 133 133 .widget { 134 - /* add spacing between widgets */ 135 - margin: 0 8px 16px; 136 - &:first-child { 137 - margin-left: 0; 138 - } 139 - &:last-child { 140 - margin-right: 0; 141 - } 133 + box-sizing: border-box; 142 142 143 - /* equal-height flex card */ 135 + /* Desktop (md+) – 4 per row */ 136 + flex: 0 0 24%; 137 + max-width: 24%; 138 + margin-bottom: 16px; 139 + 140 + /* Card look */ 144 144 display: flex; 145 145 flex-direction: column; 146 146 height: 100%; 147 - 148 - /* card look */ 149 149 padding: 18px; 150 150 background: #fff; 151 151 border: 1px solid @line; ... ... @@ -165,7 +165,7 @@ 165 165 padding-bottom: 6px; 166 166 margin-bottom: 8px; 167 167 border-bottom: 1px solid fade(@line, 60%); 168 - i { color: @brand; } 163 + i { color: @brand; } 169 169 h4 { margin: 0; line-height: 1.2; color: @text; } 170 170 } 171 171 ... ... @@ -175,9 +175,24 @@ 175 175 line-height: 1.45; 176 176 } 177 177 } 178 - } 179 179 174 + /* Tablet (sm–md) – 2 per row */ 175 + @media (max-width: 991px) { 176 + .widget { 177 + flex: 0 0 48%; 178 + max-width: 48%; 179 + } 180 + } 180 180 182 + /* Mobile (xs) – 1 per row */ 183 + @media (max-width: 767px) { 184 + .widget { 185 + flex: 0 0 100%; 186 + max-width: 100%; 187 + } 188 + } 189 + } 190 + 181 181 /* SERVICES */ 182 182 .services { 183 183 h2 {