Commit mobile testing on Termux, will finish on laptop.

pages/helpers/banner.php

@@ -5,14 +5,16 @@
 		$GLOBALS["SHOW_BANNER_PICS"] = true;
 	}
 	$show_pics = $GLOBALS["SHOW_BANNER_PICS"];
-	$banner_width = $show_pics ? 8 : 12;
+	$banner_width_desktop = $show_pics ? 6 : 12;
+	$banner_width_mobile = $show_pics ? 8 : 12;
 ?>
 		<a href='/'>
+<div class="banner-desktop">
 			<div class="row">
 				<?php if ($show_pics) echo '
-				<div class="col-2 header center banner-image banner-image01"></div>
+				<div class="col-3 header center banner-image banner-image01"></div>
 				';?>
-				<div class="col-<?php echo "$banner_width"; ?> header">
+				<div class="col-<?php echo "$banner_width_desktop"; ?> header">
 					<div class="banner-top">Peace</div>
 					<div class="banner-middle">Love</div>
 					<div class="banner-bottom">Happiness</div>
@@ -21,4 +23,18 @@
 				<div class="col-2 header center banner-image banner-image02"></div>
 				';?>
 </div>
+
+<div class="banner-mobile">
+            <?php if ($show_pics) echo '
+            <div class="col-2 header center banner-image banner-image01"></div>
+            ';?>
+            <div class="col-<?php echo "$banner_width_mobile"; ?> header">
+               <div class="banner-top">Peace</div>
+               <div class="banner-middle">Love</div>
+               <div class="banner-bottom">Happiness</div>
+            </div>                                                                            <?php if ($show_pics) echo '
+            <div class="col-2 header center banner-image banner-image02"></div>
+            ';?>
+			</div>
+</div>
 		</a>

pages/helpers/main.css

@@ -38,6 +38,9 @@
 
 			/* Handle mobile devices a bit better, making columns break out as rows. */
 
+            .banner-desktop { display: block; }
+            .banner-mobile { display: none; }
+            
 			/* Phones */
 			@media (max-width: 767px) {
 				[class*="col-"] {
@@ -55,13 +58,20 @@
 				}
 			}
 
-			/* Both */
+			/* Both Mobiles */
 			@media (max-width: 1023px) {
 				[class*="col-"] {
 					float: none;
 					display: block;
 				}
                 .banner-image {display: none; }
+				.banner-desktop { display: none; }
+				.banner-mobile { display: block; }
+			}
+            
+            /* Desktop */
+			@media (min-width: 1024px) {
+                
 			}
 
 			/** Make the menu items centered and layout horizontal. **/