Changes for page Home
Last modified by Alex Cotiugă on 2026/01/13 13:12
From version 7.93
edited by Alex Cotiugă
on 2025/11/13 21:42
on 2025/11/13 21:42
Change comment:
There is no comment for this version
To version 7.91
edited by Alex Cotiugă
on 2025/11/13 21:28
on 2025/11/13 21:28
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -117,16 +117,9 @@ 117 117 All the XWiki services you need, delivered with precision and care 118 118 </p> 119 119 120 - #set ($servicesSize = $servicesSectionData.size()) 121 121 <div class="row services-grid" role="list"> 122 122 #foreach ($entry in $servicesSectionData) 123 - #set ($classes = "service col-xs-12 col-sm-6") 124 - ## If this is the last item and the number of services is odd, 125 - ## center it on its own row on small+ screens 126 - #if ($foreach.count == $servicesSize && ($servicesSize % 2) == 1) 127 - #set ($classes = "$classes col-sm-offset-3") 128 - #end 129 - <div class="$classes" role="listitem"> 122 + <div class="service col-sm-6" role="listitem"> 130 130 <div class="service-icon"> 131 131 <i class="fa fa-$entry.icon" aria-hidden="true"></i> 132 132 </div>
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -192,12 +192,18 @@ 192 192 .services { 193 193 .services-grid { 194 194 margin-top: 12px; 195 + display: flex; 196 + flex-wrap: wrap; 197 + justify-content: space-between; 195 195 196 196 .service { 197 - /* Bootstrap grid (col-sm-6) handles width & wrapping*/200 + box-sizing: border-box; 198 198 margin-bottom: 24px; 199 199 200 - /* Icon + text on a row */ 203 + /* Desktop / tablet: 2 per row with space between */ 204 + flex: 0 0 48%; 205 + max-width: 48%; 206 + 201 201 display: flex; 202 202 align-items: flex-start; 203 203 gap: 16px; ... ... @@ -243,9 +243,11 @@ 243 243 } 244 244 } 245 245 252 + /* Mobile: stack services full width */ 246 246 @media (max-width: 767px) { 247 247 .service { 248 - margin-bottom: 20px; 255 + flex: 0 0 100%; 256 + max-width: 100%; 249 249 } 250 250 } 251 251 }