From c001f38c491f7129b2d58a18a4106ffa466a32d9 Mon Sep 17 00:00:00 2001
From: davegson <3080765+davegson@users.noreply.github.com>
Date: Thu, 21 May 2020 10:40:51 +0200
Subject: [PATCH] Remove &nbsp; for mobile devices

---
 _includes/header.html | 9 ++++++++-
 spn/index.html        | 5 ++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index d64d718..6606fd9 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -6,7 +6,14 @@
         <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0 lg:flex">
           <div class="inline-block text-center lg:text-left lg:mr-12 lg:mt-20">
             <h2 class="py-10 text-5xl tracking-tight font-extrabold text-gray-900 sm:text-5xl leading-none md:text-6xl md:mx-auto">
-              <span style="color: #6188ff;">Fight surveillance</span> because you <span style="color: #6188ff;">love&nbsp;Freedom</span>.
+              <!-- the &nbsp; is super nice for bigger screens, but breaks stuff on mobile -->
+              <!-- hence, we only have the header with &nbsp; on md+ devices -->
+              <span class="block md:hidden">
+                <span style="color: #6188ff;">Fight surveillance</span> because you <span style="color: #6188ff;">love Freedom</span>.
+              </span>
+              <span class="hidden md:block">
+                <span style="color: #6188ff;">Fight surveillance</span> because you <span style="color: #6188ff;">love&nbsp;Freedom</span>.
+              </span>
             </h2>
             <p style="max-width: 440px;" class="text-md opacity-55 max-w-4xl mx-auto lg:mx-0">
               Without privacy there is no freedom of press, no freedom of speech,
diff --git a/spn/index.html b/spn/index.html
index 2f7575d..74c6015 100644
--- a/spn/index.html
+++ b/spn/index.html
@@ -23,7 +23,10 @@ layout: page
           </div>
           <div class="inline-block text-center md:text-left">
             <h2 class="text-6xl tracking-tight font-extrabold leading-none py-10 lg:w-3/4">
-              Safing&nbsp;Privacy Network
+              <!-- the &nbsp; is super nice for bigger screens, but breaks stuff on mobile -->
+              <!-- hence, we only have the header with &nbsp; on md+ devices -->
+              <span class="block md:hidden">Safing Privacy Network</span>
+              <span class="hidden md:block">Safing&nbsp;Privacy Network</span>
             </h2>
             <p class="text-md opacity-55 max-w-4xl">
               With the SPN you protect all your connections from mass surveillance. Prevent all Internet Service Providers from collecting and selling your private activities.