From 476d314bb48a643a6123e9dcb11943dbd00048db Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Mon, 22 Mar 2021 22:27:33 +0100 Subject: Try to fix breakpoints in CSS media queries MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (min-width: XXem) and (max-width: XXem) mean ≥XXem and ≤XXem, respectively. So we get a bunch of bugs when is *exactly* XXem: - in individual portraits, the image keeps hovering over the text, - sometimes the menu bar disappears, and no menu button shows up, - etc. not all and (min-width: XXem) is the closest thing I've found to img { } } -@media (max-width: 80em) +@media not all and (min-width: 80em) { main { align-items: center; @@ -99,7 +99,7 @@ main > img { } } -@media (max-width: 50em) +@media not all and (min-width: 50em) { main > .bio-title > h1 { font-size: 1.2em; diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css index 7e1131e..7844992 100644 --- a/stylesheets/quatuor.css +++ b/stylesheets/quatuor.css @@ -59,7 +59,7 @@ } } -@media (max-width: 50em) { +@media not all and (min-width: 50em) { #photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(20%, 50%)); -- cgit v1.2.3