diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index 51966b0e3..0228895e6 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -7748,3 +7748,13 @@ body {
 p { /* fix the transform:exploit */
 	overflow: hidden !important;
 }
+
+#sub-name {
+	font-size: max(14px, 1.2vw);
+}
+
+@media (min-width: 768px) {
+	#sub-name {
+		font-size: 1.5vw;
+	}
+}
diff --git a/files/templates/header.html b/files/templates/header.html
index 6bc006d92..9eebc1d32 100644
--- a/files/templates/header.html
+++ b/files/templates/header.html
@@ -103,7 +103,7 @@
 			</a>
 
 			{% if sub %}
-				<a id="sub-name" href="/h/{{sub}}" class="font-weight-bold ml-2 flex-grow-1 mt-1" {% if sub.name|length >= 17 %}style="font-size:max(10px,1.2vw)"{% else %}style="font-size:max(14px,1.2vw)"{% endif %}>{% if not HOLE_STYLE_FLAIR %}/h/{% endif %}{{sub}}</a>
+				<a id="sub-name" href="/h/{{sub}}" class="font-weight-bold ml-1 flex-grow-1 mt-1" {% if sub.name|length >= 17 %}style="font-size:max(10px,1.2vw)"{% endif %}>{% if not HOLE_STYLE_FLAIR %}/h/{% endif %}{{sub}}</a>
 			{% elif has_logo %}
 				<div id="logo-container" class="flex-grow-1 logo-container">
 					<a href="/">