From e2f91036c069b5baadd01373aceae21327d6abfa Mon Sep 17 00:00:00 2001
From: Olivier Mehani <shtrom+mediagoblin@ssji.net>
Date: Sun, 31 May 2020 00:17:33 +1000
Subject: [PATCH 3/5] Override skeleton's container size for better
 responsiveness

Signed-off-by: Olivier Mehani <shtrom+mediagoblin@ssji.net>
---
 mediagoblin/static/css/base.css             | 30 +++++++++++++++++++++
 mediagoblin/themes/airy/assets/css/airy.css |  1 -
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 466b0b85..65e33ceb 100644
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -960,6 +960,9 @@ pre {
 /* Media queries and other responsivisivity */
 /* initial GMG max 940 */
 @media screen and (max-width: 960px) {
+  .container {
+    width: 99%;
+  }
 
   .profile_sidebar {
     width: 100%;
@@ -993,6 +996,10 @@ pre {
 }
 /* desktop resolutions */
 @media screen and (min-width: 960px) {
+  .container {
+    width: 99%;
+  }
+
   #thingy_view {
     width:640px;
     height:640px;
@@ -1002,6 +1009,10 @@ pre {
 
 /* Tablet Portrait size to standard 960 (devices and browsers) */
 @media only screen and (min-width: 768px) and (max-width: 959px) {
+  .container {
+    width: 99%;
+  }
+
   .navigation_button {
   }
   #thingy_view {
@@ -1012,7 +1023,12 @@ pre {
 
 /* All Mobile Sizes (devices and browser) */
 @media screen and (max-width: 767px) {
+  .container {
+    width: 99%;
+  }
+
   h1,h2,h3,p {
+    text-align: center;
     margin-bottom: 10px !important;
   }
 
@@ -1042,10 +1058,20 @@ pre {
   .media_comments {
     border-bottom: 1px solid #333333;
   }
+
+  .mediagoblin_content .button_action {
+    display: block;
+    text-align: center;
+  }
+
 }
 
 /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
 @media only screen and (min-width: 480px) and (max-width: 767px) {
+  .container {
+    width: 99%;
+  }
+
   #thingy_view {
     width:420px;
     height:420px;
@@ -1054,6 +1080,10 @@ pre {
 
 /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
 @media only screen and (max-width: 479px) {
+  .container {
+    width: 99%;
+  }
+
   #thingy_view {
     width:300px;
     height:300px;
diff --git a/mediagoblin/themes/airy/assets/css/airy.css b/mediagoblin/themes/airy/assets/css/airy.css
index 34bf7a8d..f5bf6bb4 100644
--- a/mediagoblin/themes/airy/assets/css/airy.css
+++ b/mediagoblin/themes/airy/assets/css/airy.css
@@ -29,7 +29,6 @@ p.navigation_button {
 header {
   background-color: #f7f7f7;
   border-bottom: 1px solid #e4e4e4;
-  width: 940px;
   margin-left: auto;
   margin-right: auto;
 }
-- 
2.26.2