Container full width on mobile attempt 1 #44

views/webpage_about.tpl

@@ -1,5 +1,6 @@
 % rebase('webpage_base.tpl')
 
+<div class="container main-container">
     <div id="info-container" class="mt-4">
         <h2 class="mt-4 mb-4">About Spothole</h2>
         <p>Spothole is a utility to aggregate "spots" from amateur radio DX clusters and xOTA spotting sites, and provide an open JSON API as well as a website to browse the data.</p>
@@ -32,5 +33,6 @@
         <p>There are no trackers, no ads, and no cookies.</p>
         <p>Spothole is open source, so you can audit <a href="https://git.ianrenton.com/ian/spothole">the code</a> if you like.</p>
     </div>
+</div>
 
 <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>

views/webpage_alerts.tpl

@@ -1,5 +1,6 @@
 % rebase('webpage_base.tpl')
 
+<div class="container main-container mobile-no-gutters">
     <div class="mt-3">
         <div class="row">
             <div class="col-auto me-auto pt-3">
@@ -156,6 +157,7 @@
         <div id="table-container"></div>
 
     </div>
+</div>
 
 <script src="/js/common.js"></script>
 <script src="/js/alerts.js"></script>

views/webpage_apidocs.tpl

@@ -1,5 +1,8 @@
 % rebase('webpage_base.tpl')
 
+<div class="container main-container">
     <redoc spec-url="/apidocs/openapi.yml"></redoc>
+</div>
+
 <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
 <script>$(document).ready(function() { $("#nav-link-api").addClass("active"); }); <!-- highlight active page in nav --></script>

views/webpage_base.tpl

@@ -67,6 +67,7 @@
             </div>
         </div>
     </nav>
+</div>
 
     <main>
 
@@ -74,6 +75,7 @@
 
     </main>
 
+<div class="container">
     <div class="hideonmobile hideonmap">
         <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
             <p class="col-md-4 mb-0 text-body-secondary">Made with love by <a href="https://ianrenton.com" class="text-body-secondary">Ian, MØTRT</a> and other contributors.</p>

views/webpage_map.tpl

@@ -1,5 +1,6 @@
 % rebase('webpage_base.tpl')
 
+<div class="container main-container mobile-no-gutters">
     <div id="map">
         <div class="mt-3 px-3" style="z-index: 1002; position: relative;">
             <div class="row">
@@ -120,6 +121,7 @@
             </div>
         </div>
     </div>
+</div>
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/dist/css/leaflet.extra-markers.min.css">

views/webpage_spots.tpl

@@ -1,5 +1,6 @@
 % rebase('webpage_base.tpl')
 
+<div class="container main-container mobile-no-gutters">
     <div id="intro-box" class="mt-3">
     <div class="alert alert-primary alert-dismissible fade show" role="alert">
       <i class="fa-solid fa-circle-info"></i> <strong>What is Spothole?</strong><br/>Spothole is an aggregator of amateur radio spots from DX clusters and outdoor activity programmes. It's free for anyone to use and includes an API that developers can build other applications on. For more information, check out the <a href="/about" class="alert-link">"About" page</a>. If that sounds like nonsense to you, you can visit <a href="/about#faq" class="alert-link">the FAQ section</a> to learn more.
@@ -236,6 +237,7 @@
         <div id="table-container"></div>
 
     </div>
+</div>
 
 <script src="/js/common.js"></script>
 <script src="/js/spotandmap.js"></script>

views/webpage_status.tpl

@@ -1,6 +1,8 @@
 % rebase('webpage_base.tpl')
 
+<div class="container main-container">
     <div id="status-container" class="row row-cols-1 row-cols-md-4 g-4 mt-4"></div>
+</div>
 
 <script src="/js/common.js"></script>
 <script src="/js/status.js"></script>

webassets/css/style.css

@@ -14,7 +14,7 @@
 
 /* GENERAL PAGE LAYOUT */
 
-div.container {
+div.main-container {
    display:grid;
    grid-template-rows:auto 1fr auto;
    grid-template-columns:100%;
@@ -155,6 +155,10 @@ a.leaflet-popup-callsign-link {
     .hideonmobile {
         display: none !important;
     }
+    .mobile-no-gutters {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
 }
 
 @media (min-width: 992px) {