Fix Funding section on mobile

ml-energy · Feb 3, 2024 · d1c6022 · d1c6022
1 parent 6cf1a59
commit d1c6022
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 13 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1151,8 +1151,8 @@ ul.contact-list i {
 
 /*START FUNDING AREA*/
 .vertical-center {
-   display: table-cell;
-   float: none;
+   display: inline-block;
    vertical-align: middle;
+   float: none;
 }
 /*END FUNDING AREA*/
diff --git a/index.html b/index.html
@@ -584,21 +584,19 @@ <h2>Funding</h2>
                     </div>
                 </div>
             </div>
+            <!-- The comment between img divs are needed to prevent .vertical-center from breaking bootstrap's width 12 grid.
+              An evil hack from https://stackoverflow.com/a/20548578 -->
             <div class="row text-center">
-                <!-- NSF LOGO -->
-                <div class="col-md-3 vertical-center">
+                <div class="col-md-3 col-sm-6 col-xs-12 vertical-center">
                     <img src="assets/img/funding/nsf.png" alt="National Science Foundation Logo" style="max-width: 60%;">
-                </div>
-                <!-- VMWare LOGO -->
-                <div class="col-md-3 vertical-center">
+                </div><!--
+                --><div class="col-md-3 col-sm-6 col-xs-12 vertical-center">
                     <img src="assets/img/funding/vmware.png" alt="VMWare Logo" style="max-width: 60%;">
-                </div>
-                <!-- Mozilla LOGO -->
-                <div class="col-md-3 vertical-center">
+                </div><!--
+                --><div class="col-md-3 col-sm-6 col-xs-12 vertical-center">
                     <img src="assets/img/funding/mozilla.png" alt="Mozilla Logo" style="max-width: 60%;">
-                </div>
-                <!-- Salesforce LOGO -->
-                <div class="col-md-3 vertical-center">
+                </div><!--
+                --><div class="col-md-3 col-sm-6 col-xs-12 vertical-center">
                     <img src="assets/img/funding/salesforce.png" alt="Salesforce Logo" style="max-width: 60%;">
                 </div>
             </div>