Fix "Mobile tag alignment events". There was an issue in the promobar because it had a fixed height. This has been changed to a min-heigth and the margins of the blue background for the promobar have been setup differently to be easier to read and maintain.

Author: Erik2609

assets/scss/templates/_main.scss

@@ -84,7 +84,7 @@ input[type="checkbox"] {
     padding-bottom: 3rem;
   }
   .promobar-mobile-desktop-layout{
-    height: 50px;
+    min-height: 50px;
     align-items: center;
     justify-content: center;
   }
@@ -156,7 +156,7 @@ input[type="checkbox"] {
     padding-bottom: 1rem;
   }
   .promobar-mobile-desktop-layout{
-    height: 100px;
+    min-height: 100px;
   }
   .mobile-desktop-margin{
     padding-top: 3rem;

layouts/shortcodes/promo_bar.html

@@ -1,19 +1,17 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
 {{$param := int (.Get "index")}}
 {{ with index .Page.Params.promo_bar $param }}
-<div id={{.id}} class="container-fluid mt-0 p-0">
-    <div class="shadow bg-lightblue">
-        <div class="row promobar-mobile-desktop-layout">
-            <div class="d-flex justify-center align-items-center px-5 link__force-underline mx-auto">
-                <span class="mr-3" style="font-size:16px; color:#005aa7;">
-                    {{ .content | markdownify }}
-                </span>
-                {{if .iframe }}
-                <span>
-                    <iframe src={{.iframe}} frameborder="0" scrolling="0" width="150" height="20" title="GitHub"></iframe>
-                </span>
-                {{ end }}
-            </div>
+<div id={{.id}} class="container-fluid mt-0 p-0 shadow bg-lightblue">
+    <div class="row promobar-mobile-desktop-layout">
+        <div class="d-flex justify-center align-items-center py-4 px-5 link__force-underline mx-auto">
+            <span style="font-size:16px; color:#005aa7;">
+                {{ .content | markdownify }}
+            </span>
+            {{if .iframe }}
+            <span class="ml-2">
+                <iframe src={{.iframe}} frameborder="0" scrolling="0" width="150" height="20" title="GitHub"></iframe>
+            </span>
+            {{ end }}
         </div>
     </div>
 </div>