diff --git a/assets/css/main.css b/assets/css/main.css index 2a0bdb8..1e76a41 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -84,7 +84,7 @@ nav li, } /* single-line nav on widescreen */ -@media (min-width: 32em) { +@media print, (min-width: 32em) { header nav li { display: inline; padding-right: 0.5em; diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index b92090b..c8c0221 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -335,8 +335,8 @@ Exceptions exist: one or two very simple responsive changes won't hurt. The main For example, the only responsive layout change on my website (https://seirdy.one) is a single CSS declaration to switch between inline and multi-line navigation links at the top of the page: ``` -@media (min-width: 32rem) { - nav li { +@media print, (min-width: 32rem) { + header nav li { display: inline; } } diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index ac1d659..b2c670f 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -296,8 +296,8 @@ The only responsive layout change on [my website](https://seirdy.one/) is a sing ``` -@media (min-width: 32rem) { - nav li { +@media print, (min-width: 32rem) { + header nav li { display: inline; } }