index: Fix view on mobile

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/index.html b/src/templates/index.html
index 40c685c6b18363af1970c0c81e937b2d1cd29c42..35297f18aee6b36314dfc02ed3b4f3c4bbb7e90c 100644 (file)
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -14,7 +14,7 @@
                                        <img class="img-fluid" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
                                </div>
 
-                               <div class="col-md-7 my-5 align-self-center">
+                               <div class="col-md-7 my-5 align-self-center px-3">
                                        <h1 class="display-1">The Open Source Firewall Distribution</h1>
 
                                        <div class="btn-toolbar">
@@ -39,7 +39,7 @@
                                </div>
 
                                <div class="row mt-5 mb-lg-6 mb-md-5">
-                                       <div class="col-md-6 col-lg-4 mb-6 pb-lg-5 d-flex">
+                                       <div class="col-md-6 col-lg-4 mb-5 pb-lg-5 d-flex">
                                                <div class="align-self-stretch">
                                                        <span class="fas fa-shield-alt fa-2x text-primary px-3"></span>
                                                </div>
@@ -54,7 +54,7 @@
                                                </div>
                                        </div>
                                        
-                                       <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                       <div class="col-md-6 col-lg-4 mb-5 d-flex">
                                                <div class="align-self-stretch">
                                                        <span class="fas fa-fast-forward fa-2x text-primary px-3"></span>
                                                </div>
@@ -68,7 +68,7 @@
                                                </div>  
                                        </div>
                                        
-                                       <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                       <div class="col-md-6 col-lg-4 mb-5 d-flex">
                                                <div class="align-self-stretch">
                                                        <span class="fas fa-couch fa-2x text-primary px-3"></span>
                                                </div>
@@ -83,7 +83,7 @@
                                                </div>
                                        </div>
 
-                                       <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                       <div class="col-md-6 col-lg-4 mb-5 d-flex">
                                                <div class="align-self-stretch">
                                                        <span class="fas fa-lock fa-2x text-primary px-3"></span>
                                                </div>
@@ -98,7 +98,7 @@
                                                </div>
                                        </div>
                                        
-                                       <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                       <div class="col-md-6 col-lg-4 mb-5 d-flex">
                                                <div class="align-self-stretch">
                                                        <span class="fab fa-osi fa-2x text-primary px-3"></span>
                                                </div>
@@ -112,7 +112,7 @@
                                                </div>
                                        </div>
                                        
-                                       <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                       <div class="col-md-6 col-lg-4 mb-5 d-flex">
                                                <div class="align-self-stretch">
                                                        <span class="fas fa-heart fa-2x text-primary px-3"></span>
                                                </div>