let's try to make the header somewhat responsive

htdocs/css/openwebrx-header.css

@@ -57,6 +57,8 @@
 
 #webrx-top-logo {
     padding: 12px;
+    /* overwritten by media queries */
+    display: none;
 }
 
 #webrx-rx-avatar {
@@ -72,11 +74,15 @@
 }
 
 #webrx-rx-texts {
+    /* minimum layout width */
+    width: 0;
+    /* will be getting wider with flex */
     flex: 1;
-    padding: 10px;
+    overflow: hidden;
 }
 
 #webrx-rx-texts div {
+    margin: 0 10px;
     padding: 3px;
     white-space:nowrap;
     overflow: hidden;
@@ -84,6 +90,10 @@
     color: #909090;
 }
 
+#webrx-rx-texts div:first-child {
+    margin-top: 10px;
+}
+
 #webrx-rx-title {
     font-family: "DejaVu Sans", Verdana, Geneva, sans-serif;
     font-size: 11pt;
@@ -168,6 +178,32 @@
     text-shadow: none;
 }
 
+/*
+ * Responsive stuff
+ */
+
+@media (min-width: 576px) {
+    #webrx-rx-texts {
+        display: initial;
+    }
+}
+
+@media (min-width: 768px) {
+}
+
+@media (min-width: 992px) {
+    #webrx-top-logo {
+        display: initial;
+    }
+}
+
+@media (min-width: 1200px) {
+}
+
+/*
+ * Sprites (images)
+ */
+
 .sprite-panel-status {
     background-position: 0 0;
     width: 44px;