CSS.

src/snek/static/base.css

@@ -4,6 +4,7 @@
   box-sizing: border-box;
 }
 
+
 body {
   font-family: Arial, sans-serif;
   background-color: #1a1a1a;
@@ -12,6 +13,10 @@ body {
   display: flex;
   flex-direction: column;
   height: 100vh;
+  min-width: 100%;
+}
+main {
+  min-width: 100%;
 }
 
 header {

src/snek/static/style.css

@@ -1,3 +1,27 @@
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+.center {
+    padding: 30px;
+    
+    text-align: center;
+    margin: auto auto;
+    left: 25%;
+    position: absolute;
+  }
+
+  @media screen and (max-width: 500px) {
+    .center {
+        width: 100%;
+        left: 0px;
+    }
+    
+  }
+
 h1 {
     font-size: 2em;
     color: #f05a28;

src/snek/templates/base.html

@@ -18,11 +18,6 @@
 
     </header>
     <main>
-        <aside class="sidebar">
-        {% block sidebar %}
-        
-        {% endblock %}
-    </aside>
     {% block main %}
     {% endblock %}
 </main>

src/snek/templates/login.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 
 {% block main %}
-  <generic-form url="/login-form.json"></generic-form>
+
+   <generic-form class="center" url="/login-form.json"></generic-form>
+
 {% endblock %}

src/snek/templates/register.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
 
 {% block main %}
-  <generic-form url="/register-form.json"></generic-form>
+  <generic-form class="center" url="/register-form.json"></generic-form>
 {% endblock %}