diff --git a/htdocs/css/sucs.css b/htdocs/css/sucs.css
index de09d8b6e3c4ba13585d0f6136587f3e5d579cf4..7b27e5550ff6acf708f4c582be3e3c25d2121184 100644
--- a/htdocs/css/sucs.css
+++ b/htdocs/css/sucs.css
@@ -7,6 +7,7 @@ body {
     margin: 0;
     background: #f2f2f2;
     min-width: 600px;
+    height: calc(100vh - 30px);
 }
 
 hr {
@@ -38,7 +39,6 @@ a:hover {
    -------------------------------------------------- */
 
 #branding {
-    background: url('/images/orangefade.png') repeat-x #ffc62b bottom;
     clear: both;
 }
 
@@ -92,6 +92,13 @@ a:hover {
     border-radius: 0px
 }
 
+.join-header {
+  font-size: 30pt;
+  margin-left: 10px;
+  text-decoration: none;
+  color: #ffc62b !important;
+}
+
 /* --------------------------------------------------
     Breadcrumb
    -------------------------------------------------- */
@@ -129,36 +136,92 @@ a:hover {
    -------------------------------------------------- */
 
 #wrapper {
-    background: #f2f2f2;
-    min-height: 100%;
-    margin-top: 10px;
+  background: #f2f2f2;
+  min-height: 100%;
+  margin-top: 10px;
 }
 
 #navigation {
-    float: left;
-    width: 17%;
-    padding-top: 0.5em;
-    /*	overflow: auto; */
+  float: left;
+  width: 300px;
+  padding-top: 0.5em;
 }
 
 #content {
-    float: right;
-    width: 82%;
+  float: right;
+  width: calc(100% - 300px);
 }
 
 #primary {
-    float: left;
-    width: 66%;
-    padding: 0;
+  float: left;
+  width: calc(100% - 400px);
 }
 
 #primaryC {
-    padding-right: 0.5em;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 #secondary {
-    float: right;
-    width: 33%;
+  float: right;
+  width: 400px;
+}
+
+@media only screen and (max-width: 1080px) {
+  #wrapper {
+    margin-top: -5px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #navigation {
+    order: 1;
+    width: 100%;
+    float: top;
+  }
+
+  #content {
+    margin-top: 10px;
+    order: 2;
+    float: bottom;
+    width: 100%;
+  }
+
+  #primary {
+    float: none;
+    width: 100%;
+  }
+
+  #secondary {
+    float: none;
+    width: 100%;
+  }
+
+  #footer {
+    height: auto !important;
+  }
+
+  #branding {
+    height: auto !important;
+  }
+
+  #logo {
+    padding-right: 0;
+  }
+
+  #title h1 {
+    margin-top: 20px;
+    font-size: 12pt;
+    padding-left: 0;
+  }
+
+  #breadcrumb li {
+    display: block;
+  }
+
+  #loginForm {
+    padding-top: 1em;
+  }
 }
 
 /* --------------------------------------------------
@@ -263,15 +326,18 @@ ul#valid {
     Footer
    -------------------------------------------------- */
 
+#footer-fix {
+    min-height: calc(100% - 16px);
+}
+
 #footer {
     background: #e65c00;
-    margin-bottom: -20px;
+    height: 30px;
 }
 
 #footer p {
     text-align: center;
     padding-top: 5px;
-    padding-bottom: 5px;
 }
 
 /* --------------------------------------------------
diff --git a/static/fragments/Join.txt b/static/fragments/Join.txt
index 3759360b5de47abfab9cfa99cca63e2bee3e8dc1..57f60db9c4d6fcb9919abdfbeddb4f4d5b683bc1 100644
--- a/static/fragments/Join.txt
+++ b/static/fragments/Join.txt
@@ -1,6 +1,6 @@
 <!-- Joining box --> 
 <div class="cbb"> 
-<h3>Join SUCS!</h3> 
+<a class="join-header" href="https://www.swansea-union.co.uk/activities/society/sucs/" target="_blank">Join SUCS!</a>
 <p>As well as being an excellent way to meet people with similar interests (we have regular social events and we&#39;re all really nice), you also get all this great stuff: </p> 
 <ul> <li>Use of our dedicated <a href="../Games/" title="Gameserver">games server</a></li> 
 <li><a href="../Knowledge/Help/SUCS%20Services/Using%20your%20web%20space">Web hosting</a> with scripting and database support</li>
diff --git a/templates/foot.tpl b/templates/foot.tpl
index 09f8a9a214db3eb81ec88e75dc31f6f47d2e6f16..7644691698387e74c1c1fbd5a388f8bb44641f3d 100644
--- a/templates/foot.tpl
+++ b/templates/foot.tpl
@@ -15,6 +15,7 @@
 
 <div class="clear"></div>
 </div>
+</div>
 
 <div id="footer">
     <p>Site designed and maintained by SUCS. All opinions expressed are those of the relevant individual and not of the society.</p>
diff --git a/templates/head.tpl b/templates/head.tpl
index 910439c11d2653ea7a915f7fcb9d171788dd675f..c2ede3376c9956b444dfdf266aaa39f94009d416 100644
--- a/templates/head.tpl
+++ b/templates/head.tpl
@@ -31,7 +31,8 @@
           content="Swansea University Computer Society - providing student computing facilities and personal web pages."/>
     {if $refresh}
         <meta http-equiv="REFRESH" content="{$refresh}" />{/if}
-
+    
+    <meta name="viewport" content="width=device-width">
 
     {if isset($extra_scripts)}
         {foreach from=$extra_scripts item=script}
@@ -54,10 +55,9 @@
 </head>
 <body>
 
-{include file="branding.tpl"}
-
-
-<div id="wrapper">
+  <div id="footer-fix">
+    {include file="branding.tpl"}
 
-    <div id="content">
-        {include file="usermessages.tpl"}
+    <div id="wrapper">
+	<div id="content">
+	  {include file="usermessages.tpl"}