From 596bfaaf6d9f0369fd8d31cac802198e0939efb5 Mon Sep 17 00:00:00 2001 From: Cassie Jones Date: Wed, 19 Feb 2020 00:53:32 +0100 Subject: [PATCH] Avoid calc(700px + 9em) in media queries I got a report that code blocks looked wrong on mobile. I was able to reproduce in Chrome: they didn't get their margins properly updated by the media query. Investigation revealed that apparently calc() with mixed units is broken in media queries on Chrome. https://bugs.chromium.org/p/chromium/issues/detail?id=843584 What I'm seeing here seems worse than the issue described there, so there might be other factors going on, but it worked perfectly in Firefox so I'm not sure what's going on. >_< --- _includes/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/style.css b/_includes/style.css index 0a2b4b7..a1b2c51 100644 --- a/_includes/style.css +++ b/_includes/style.css @@ -71,7 +71,7 @@ pre > code { background: #f5f2f0; } -@media (max-width: calc(700px + 9em)) { +@media (max-width: 825px) { pre > code { margin: 0 -1em; width: calc(100% + 2em); } } -- 2.43.2