diff options
| author | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2021-03-22 22:27:33 +0100 |
|---|---|---|
| committer | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2021-03-22 22:27:33 +0100 |
| commit | 476d314bb48a643a6123e9dcb11943dbd00048db (patch) | |
| tree | 338b85d9e7781bf2ab2c16ef414d286b6d955f22 /stylesheets | |
| parent | 3b781d3c8e12750a4dd771f193b473abe6ab3b55 (diff) | |
| download | quatuorbellefeuille.com-476d314bb48a643a6123e9dcb11943dbd00048db.tar.xz | |
Try to fix breakpoints in CSS media queries
(min-width: XXem) and (max-width: XXem) mean ≥XXem and ≤XXem,
respectively. So we get a bunch of bugs when <body> 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
<XXem.
Diffstat (limited to 'stylesheets')
| -rw-r--r-- | stylesheets/commun.css | 2 | ||||
| -rw-r--r-- | stylesheets/concerts.css | 2 | ||||
| -rw-r--r-- | stylesheets/contact.css | 2 | ||||
| -rw-r--r-- | stylesheets/galerie.css | 2 | ||||
| -rw-r--r-- | stylesheets/membre.css | 4 | ||||
| -rw-r--r-- | stylesheets/quatuor.css | 2 |
6 files changed, 7 insertions, 7 deletions
diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 38d6cdb..161d5ba 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -244,7 +244,7 @@ footer.legal { } } -@media (max-width: 50em) { +@media not all and (min-width: 50em) { body { --banner-logo-height: 6rem; --banner-name-height: 1.8rem; diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css index 9ba53c8..914b546 100644 --- a/stylesheets/concerts.css +++ b/stylesheets/concerts.css @@ -178,7 +178,7 @@ a.thumbnail { } } -@media (max-width: 50em) { +@media not all and (min-width: 50em) { .events { --cell-width: 10em; --cell-height: 8em; diff --git a/stylesheets/contact.css b/stylesheets/contact.css index fd75a7c..7921991 100644 --- a/stylesheets/contact.css +++ b/stylesheets/contact.css @@ -62,7 +62,7 @@ main h1 { } } -@media (max-width: 50em) { +@media not all and (min-width: 50em) { main dl, main ul { text-align: center; } diff --git a/stylesheets/galerie.css b/stylesheets/galerie.css index 31c0130..5ce768a 100644 --- a/stylesheets/galerie.css +++ b/stylesheets/galerie.css @@ -68,7 +68,7 @@ main h1 { } } -@media (max-width: 50em) { +@media not all and (min-width: 50em) { .mosaic.photos { --mosaic-side: 8em; } diff --git a/stylesheets/membre.css b/stylesheets/membre.css index 5025c13..1b6d7e1 100644 --- a/stylesheets/membre.css +++ b/stylesheets/membre.css @@ -77,7 +77,7 @@ main > 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%)); |