Fix display of promotional footer on narrow screens

_static/custom_html.css

@@ -80,11 +80,9 @@ div.sphinxsidebarwrapper div.logo img.logo {
 	max-height: 10em;
 }
 
-/* Footer */
+/* Footer(s) */
 
 div.pre-footer {
-	width: 940px;
-	margin: 20px auto 0 auto;
 	padding: 4px;
 	font-size: 16px;
 	text-align: center;
@@ -95,9 +93,19 @@ div.pre-footer a {
 	color: #444;
 }
 
+div.pre-footer-wide {
+	width: 940px;
+	margin: 20px auto 0 auto;
+}
+
+div.pre-footer-narrow {
+	display: none;
+	margin: 30px auto 0 auto;
+}
+
 /* Media queries */
 
-@media screen and (max-width: 870px) {
+@media screen and (max-width: 875px) {
 	/* Override narrow window list formatting */
 	
 	ul {
@@ -109,12 +117,19 @@ div.pre-footer a {
 	span.paragraph-num {
 		left: -3.2rem;
 	}
-}
-
-@media screen and (max-width: 875px) {
+	
 	/* Sidebar text colour */
 	
 	div.sphinxsidebar ul {
 		color: #fff;
 	}
+	
+	/* Footer(s) */
+	
+	div.pre-footer-wide {
+		display: none;
+	}
+	div.pre-footer-narrow {
+		display: block;
+	}
 }

potheme_html/layout.html

@@ -1,7 +1,15 @@
 {%- extends "alabaster/layout.html" %}
 
+{%- block document %}
+      {{ super() }}
+      
+      <div class="pre-footer pre-footer-narrow">
+        <a href="https://gumroad.com/l/KErDHC">Buy the ebook: Pay what you want</a>
+      </div>
+{%- endblock %}
+
 {%- block footer %}
-    <div class="pre-footer">
+    <div class="pre-footer pre-footer-wide">
       <a href="https://gumroad.com/l/KErDHC">Buy the ebook: Pay what you want</a>
     </div>