FIX: Restrict logo width for small screens

FIX: Restrict logo width for small screens

From 6027e7ba3d32e26007ec11df55b33fb71e0980b8 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 28 Nov 2018 13:26:12 -0500
Subject: [PATCH] FIX: Restrict logo width for small screens


diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 7904889..5268e25 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -15,10 +15,12 @@
     animation: fadein 0.5s;
     a {
       display: block;
+      width: 100%;
     }
   }
   #site-logo {
-    height: 2.4em;
+    max-height: 2.4em;
+    max-width: 100%;
   }
   #site-text-logo {
     margin: 0;

GitHub

Does image participate in layout? will this change mean text bounces while logo is loading?

1 Like

This shouldn’t impact layout, it was solving a problem with long logos pushing menu contents off-screen.

The a and #site-logo width weren’t being contained by their parent div, so this could happen (reported here: https://meta.discourse.org/t/change-to-mobile-spacing-banner-sizing-on-bbs-boingboing-net/103004):

The logo boingboing uses won’t ever work at 2.4em height, which is why I switched it to max-height instead. The header height still isn’t allowed to change based on the logo size.

I guess the topic title might bounce horizontally when the small logo loads on scroll, but that was also true before this commit.

2 Likes