Skip to Content

Changes for page Home

Last modified by Agnease on 2026/05/22 07:57
From version 7.118
edited by Agnease
on 2025/11/14 08:30
Change comment: There is no comment for this version
To version 7.120
edited by Agnease
on 2025/11/14 08:59
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -52,12 +52,14 @@
52 52   <p class="lead">10+ years of XWiki expertise with structured delivery and lasting collaboration</p>
53 53   <div class="row widgets" role="list">
54 54   #foreach ($entry in $whySectionData)
55 - <div class="widget col-sm-6 col-md-3" role="listitem">
56 - <div class="icon" aria-hidden="true">
57 - <i class="fa fa-$entry.icon"></i>
58 - <h4>$entry.title</h4>
55 + <div class="col-xs-12 col-sm-6 col-md-3">
56 + <div class="widget" role="listitem">
57 + <div class="icon" aria-hidden="true">
58 + <i class="fa fa-$entry.icon"></i>
59 + <h4>$entry.title</h4>
60 + </div>
61 + <p>$entry.content</p>
59 59   </div>
60 - <p>$entry.content</p>
61 61   </div>
62 62   #end
63 63   </div>
XWiki.StyleSheetExtension[0]
code
... ... @@ -162,21 +162,20 @@
162 162   /* === WHY CHOOSE (widgets using flex) === */
163 163   .widgets {
164 164   margin-top: 12px;
165 - display: flex;
166 - flex-wrap: wrap;
167 - justify-content: space-between;
165 + display: grid;
166 + grid-template-columns: 1fr;
167 + grid-gap: 16px; // spacing between cards
168 168  
169 - .widget {
170 - box-sizing: border-box;
169 + @media (min-width: 768px) {
170 + grid-template-columns: repeat(2, 1fr);
171 + }
171 171  
172 - /* Desktop (md+) – 4 per row */
173 - flex: 0 0 24%;
174 - max-width: 24%;
175 - margin-bottom: 16px;
173 + @media (min-width: 992px) {
174 + grid-template-columns: repeat(4, 1fr);
175 + }
176 176  
177 - display: flex;
178 - flex-direction: column;
179 - height: 100%;
177 + .widget {
178 + box-sizing: border-box;
180 180   padding: 18px;
181 181   background: #fff;
182 182   border: 1px solid @line;
... ... @@ -183,6 +183,9 @@
183 183   border-radius: @radius;
184 184   box-shadow: @shadow-sm;
185 185   transition: transform .18s ease, box-shadow .18s ease;
185 + display: flex;
186 + flex-direction: column;
187 + height: 100%;
186 186  
187 187   &:hover {
188 188   transform: translateY(-2px);
... ... @@ -206,20 +206,6 @@
206 206   line-height: 1.45;
207 207   }
208 208   }
209 -
210 - @media (max-width: 991px) {
211 - .widget {
212 - flex: 0 0 48%;
213 - max-width: 48%;
214 - }
215 - }
216 -
217 - @media (max-width: 767px) {
218 - .widget {
219 - flex: 0 0 100%;
220 - max-width: 100%;
221 - }
222 - }
223 223   }
224 224  
225 225   /* SERVICES */