adjust size for smaller screens

Citizen-Knowledge-Graph · Oct 25, 2023 · 50eebea · 50eebea
1 parent 84e4321
commit 50eebea
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/_includes/mylayout.njk b/src/_includes/mylayout.njk
@@ -12,13 +12,15 @@ title: My Rad Blog
 <body>
 
 <!-- 1. Fixed Navbar -->
+<!-- Deactivate Navbar for now
 <div class="navbar">
     <div class="navbar-inner">
         <a href="#home">Home</a>
         <a href="#about">About</a>
         <a href="#contact">Contact</a>
     </div>
 </div>
+-->
 
 <!-- 2. Central Scrollable Element -->
 <div class="central-container">

diff --git a/src/static/css/bundle.css b/src/static/css/bundle.css
@@ -65,3 +65,10 @@ body, p, a {
     margin-bottom: 20px;
     color: darkblue;
 }
+
+@media (max-width: 768px) {  /* Typically, 768px is a breakpoint for tablets, adjust if needed */
+    .central-container {
+        padding-left: 8%;  /* Reduce padding for smaller screens */
+        padding-right: 8%; /* Reduce padding for smaller screens */
+    }
+}